Slider

Kildekode på GitHub · Les som Markdown

Slider lar brukeren velge en numerisk verdi ved å dra en håndtak langs en linje. Bygget på Radix UI Slider med støtte for enkelt- og flerverdier, trinnstørrelse og full tastaturnavigasjon.

Importering

import { Slider } from "@kilden/designsystem";

Grunnleggende bruk

<div style={{ maxWidth: "24rem" }}>
<Slider defaultValue={[50]} max={100} step={1} aria-label="Volum" />
</div>

Med label og FormField

<FormField style={{ maxWidth: "24rem" }}>
<div style={{ display: "flex", justifyContent: "space-between" }}>
  <Label>Volum</Label>
  <span style={{ fontSize: "0.875rem", opacity: 0.7 }}>75%</span>
</div>
<Slider defaultValue={[75]} max={100} step={1} aria-label="Volum" />
</FormField>

Med trinnstørrelse

Bruk step for å begrense verdiene til bestemte intervaller.

<FormField style={{ maxWidth: "24rem" }}>
<Label>Temperatur (steg på 5)</Label>
<Slider defaultValue={[20]} min={0} max={40} step={5} aria-label="Temperatur" />
<FormDescription>Velg en temperatur mellom 0 og 40°C.</FormDescription>
</FormField>

Range-slider

Med to verdier i defaultValue får du en range-slider for å velge et intervall.

<FormField style={{ maxWidth: "24rem" }}>
<Label>Prisintervall</Label>
<Slider defaultValue={[200, 800]} min={0} max={1000} step={50} aria-label="Prisintervall" />
<FormDescription>Velg minimum og maksimum pris.</FormDescription>
</FormField>

Deaktivert

<div style={{ maxWidth: "24rem" }}>
<Slider defaultValue={[50]} max={100} disabled aria-label="Deaktivert" />
</div>

Bruksanbefalinger

Bruk for relative verdier

Slider egner seg best når den eksakte verdien er mindre viktig enn den relative posisjonen — som volum, lysstyrke eller filtreringsintervaller.

Ikke bruk for presise verdier

For nøyaktige tall (alder, mengde, beløp) er Input med type='number' bedre. Slider er upresis for eksakte verdier.

Tilgjengelighet

Bruker role="slider" med aria-valuemin, aria-valuemax, aria-valuenow
Piltaster justerer verdien (høyre/opp øker, venstre/ned minsker)
Home setter minimum, End setter maksimum
Legg til aria-label eller koble til en label med aria-labelledby
aria-orientation settes automatisk

Props

Prop	Type	Default	Beskrivelse
`defaultValue`	`number[]`	—	Startverdi(er) — bruk `[50]` for enkel, `[25, 75]` for range
`value`	`number[]`	—	Kontrollert verdi(er)
`onValueChange`	`(value: number[]) => void`	—	Kalles når verdien endres
`onValueCommit`	`(value: number[]) => void`	—	Kalles når brukeren slipper håndtaket
`min`	`number`	`0`	Minimumsverdi
`max`	`number`	`100`	Maksimumsverdi
`step`	`number`	`1`	Trinnstørrelse
`disabled`	`boolean`	`false`	Deaktiver slideren
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Retning
`name`	`string`	—	Navn for skjemainnsending