Slider

A 4px track, an ink range and an ink thumb; a value bubble while dragging; ticks and ranges.

import { Slider } from "@logicplanes/kaeso-ui";

Props

aria-label
string
The accessible name, for when there is no visible label.
defaultValue
number | number[]
The value, or two values for a range, on first render.
disabled
boolean
Turns it off: it can't be used, and it looks dimmed.
formatValue
((value: number) => string)
Formats the value in the bubble shown while dragging. Defaults to the number in the provider's language.
getAriaLabel
((index: number) => string)
Returns the accessible name of each thumb of a range.
max
number = 100
The highest value allowed.
min
number = 0
The lowest value allowed.
name
string
The field name the value is sent under in a form.
onValueChange
((value: number | number[]) => void)
Called with the value while it is dragged.
onValueCommitted
((value: number | number[]) => void)
Called with the value when dragging ends.
step
number = 1
The steps the value moves in.
ticks
boolean | number[]
Marks under the track at every step (or at these values).
value
number | number[]
The value, or two values for a range, when you control it.