slider
A slider is a track, the part of it that is selected, and a thumb for every value. That last part is the whole design: pass one value and it is a slider, pass two and it is a range, and nothing about the component or its styling counts them.
<Slider label="Volume" showValue defaultValue={[65]} />
<Slider label="Budget" defaultValue={[20, 70]} minStepsBetweenThumbs={5} /><Slider label="Volume" show-value :default-value="[65]" />
<Slider label="Budget" :default-value="[20, 70]" :min-steps-between-thumbs="5" />The value is an array in both frameworks for the same reason. React takes value with
onValueChange, or defaultValue to leave it alone; Vue takes v-model, with
defaultValue as the uncontrolled counterpart. onValueChangeEnd fires once when a thumb
is let go, which is the one to send to a server.
The scale
min, max and step set the scale, and origin decides where the selected range is
measured from. "center" is for a value that reads as a deviation rather than an amount:
a balance control filling out from the middle rather than up from the left.
minStepsBetweenThumbs keeps two thumbs apart, in steps rather than in pixels.
Marks
marks puts ticks under the track, each with a value and an optional label. Ark
positions them against the same scale as the thumbs and marks each one as under, at, or
past the current value, so a mark the slider has passed reads differently from one it
has not.
<Slider label="Quality" step={25} marks={[{ value: 0, label: "0" }, { value: 100, label: "100" }]} /><Slider label="Quality" :step="25" :marks="[{ value: 0, label: '0' }, { value: 100, label: '100' }]" />What the recipe may not style
The thumbs and the marks are sized by the recipe and positioned by Ark, which writes
position, an offset along the axis, and a translate that centres them on it, all as
inline styles. So nothing in the recipe may offset or translate either. A Tailwind
translate-x-* sets a different property than Ark’s inline translate, so the two would
compose into a double shift rather than one replacing the other.
Size is thickness
size sets how thick the track is, not how long, which is the rule the Progress follows.
orientation is read off Ark’s own attribute rather than declared as a variant; a
vertical slider fills the height of its container, so give it one.
Slots
The same word names the recipe slot, the data-slot attribute and the key in ui.
- base
- header
- label
- valueText
- control
- track
- range
- thumb
- markerGroup
- marker
Variants
Read off the recipe, so these are the values that actually resolve. A Theme layer can change which one is the default; it cannot add a value.
- color
- primarysecondarysuccessinfowarningerrorneutral
- size
- xssmmdlgxl
Props
Taken by both adapters, read out of the component module. The same names and the same types work in React and Vue.
- ui
SliderUI
Per-slot class overrides.
- color
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
Defaults to
"primary"- size
"xs" | "sm" | "md" | "lg" | "xl"
Defaults to
"md"- label
string
Text above the track, which also names it for a screen reader.
- showValue
boolean
Show the value beside the label.
Defaults to
false- marks
SliderMark[]
Ticks under the track.
- min
number
Defaults to
0- max
number
Defaults to
100- step
number
Defaults to
1- orientation
"horizontal" | "vertical"
Defaults to
"horizontal"- origin
"start" | "center"
Where the selected range is measured from.
Defaults to
"start"- minStepsBetweenThumbs
number
How close two thumbs may get, in steps.
Defaults to
0- disabled
boolean
- readOnly
boolean
- invalid
boolean
Marks the slider invalid for assistive technology.
- name
string
Submits the value under this name inside a form.
- form
string
Id of the form to submit with, for a slider rendered outside it.
React only
Also takes Omit< React.HTMLAttributes<HTMLDivElement>, "aria-label" | "aria-labelledby" | "color" | "defaultValue" | "dir" >, and Pick< SliderRootProps, | "value" | "defaultValue" | "onValueChange" | "onValueChangeEnd" | "aria-label" | "aria-labelledby" | "ids" >. A className among them reaches the base slot.