Slider

Slider for å velge en eller flere verdier lineært.

GitHubEndringslogg

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Test props

hideLabel
hideValue
hideMin
hideMax
disabled

Eksempler

Størrelser

<Stack gap="lg">
  <Slider size="small" label="Label" defaultValue={[50]} min={0} max={100} />
  <Slider size="medium" label="Label" defaultValue={[50]} min={0} max={100} />
  <Slider size="large" label="Label" defaultValue={[50]} min={0} max={100} />
</Stack>

Disabled

<Slider label="Label" defaultValue={[50]} min={0} max={100} disabled />

Range

Man kan legge til flere elementer i value eller defaultValue-listen for å få flere "thumbs".

<Slider size="medium" label="Label" defaultValue={[20,70]} min={0} max={100} />

Retningslinjer

Mer kommer.

Kode

<Slider />

import { Slider } from "@aneo-org/design-react/clientComponents";
PropTypeBeskrivelse
labelstring
hideLabel?booleanSkjuler label visuelt, men leses fortsatt opp for skjermlesere.
size?"small" | "medium" | "large"
suffix?stringSuffiks som vises bak verdiene.
defaultValue?Array<number>Brukes dersom komponenten skal være ukontrollert men ha standardverdi. Oppgis som array av verdier mellom min og max.
value?Array<number>Brukes som kontrollert verdi. Oppgis som array av verdier mellom min og max.
hideValue?booleanSkjuler value visuelt, men leses fortsatt opp for skjermlesere.
onValueChange?(newValue: Array<string>) => void
min?numberStandardverdi 0.
max?numberStandardverdi 100.
step?numberIntervall mellom hvert steg i slideren. Standardverdi 1.
disabled?boolean
hideMin?booleanSkjuler min verdi.
hideMax?booleanSkjuler max verdi.