Slider
A value picked along a range.
Anatomy
<script>
import { Slider } from '@shardsui/svelte/slider'
</script>
<Slider.Root>
<Slider.Label />
<Slider.Value />
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb />
</Slider.Track>
</Slider.Control>
</Slider.Root>Usage guidelines
- Form controls must have an accessible name: a
<Slider.Label>usually does the job; when the design has no visible label, give each<Slider.Thumb>its ownaria-labelinstead. See Labeling a slider and the forms guide.
Examples
Range slider
Build a range slider in two steps:
- Pass an array of values, and render one
<Slider.Thumb>per value in that array - For server-side rendering, also give each thumb a numeric
indexmatching the position of its value in the array
When two thumbs meet under the pointer, thumbCollisionBehavior on <Slider.Root> decides what happens next.
Formatting the value
format and locale reach both <Slider.Value> and the thumbs' aria-valuetext. Without a children snippet, Value renders the formatted values joined by an en dash; pass one to compose the text yourself:
<Slider.Value>
{#snippet children(formattedValues)}
{formattedValues[0]} to {formattedValues[1]}
{/snippet}
</Slider.Value>Thumb alignment
With the default "center" alignment, a thumb at min or max overhangs the ends of the control. With thumbAlignment="edge", the thumb is inset so its edge lines up with the control's edge, keeping it fully inside.
Labeling a slider
When a single-thumb slider has no visible label — a volume control, say — put an aria-label on the <Slider.Thumb>:
<Slider.Root>
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb aria-label="Volume" />
</Slider.Track>
</Slider.Control>
</Slider.Root>If the label should be visible instead, render <Slider.Label>:
<Slider.Root>
<Slider.Label>Volume</Slider.Label>
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb />
</Slider.Track>
</Slider.Control>
</Slider.Root>A multi-thumb range slider needs both: keep the visible <Slider.Label>, and give each <Slider.Thumb> its own aria-label so screen readers can tell one thumb from another:
<Slider.Root value={[25, 75]}>
<Slider.Label>Price range</Slider.Label>
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb index={0} aria-label="Minimum price" />
<Slider.Thumb index={1} aria-label="Maximum price" />
</Slider.Track>
</Slider.Control>
</Slider.Root>Vertical
For a vertical slider, pass orientation="vertical" to <Slider.Root>.
Form integration
Give <Slider.Root> a name and its value is submitted with the surrounding form:
<Form>
<Slider.Root name="volume">
<Slider.Label>Volume</Slider.Label>
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb />
</Slider.Track>
</Slider.Control>
</Slider.Root>
</Form>For a grouped multi-thumb range slider in a form, nest it in a Fieldset: the legend names the group while each thumb keeps its own aria-label:
<Field.Root>
<Fieldset.Root>
<Fieldset.Legend>Price range</Fieldset.Legend>
<Slider.Root value={[25, 75]}>
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb index={0} aria-label="Minimum price" />
<Slider.Thumb index={1} aria-label="Maximum price" />
</Slider.Track>
</Slider.Control>
</Slider.Root>
</Fieldset.Root>
</Field.Root>API reference
Root
Groups all parts of the slider.
Renders a <div> element with role="group".
Label
An accessible label for the slider, associated with every thumb. Clicking it focuses the thumb of a
single-thumb slider. Its ID defaults to one derived from the root's, and can be overridden with id.
Renders a <div> element.
Value
Displays the current value of the slider as text.
Renders an <output> element pointing at the thumb inputs through for.
Control
The interactive area of the slider: pressing anywhere inside it moves the nearest enabled thumb to
that position and starts a drag.
Renders a <div> element.
Track
Contains the indicator and the thumbs, and represents the entire range of the slider. position: relative is set inline so the thumbs can be positioned against it.
Renders a <div> element.
Indicator
Visualizes the current value of the slider. Its offset and length along the track are set inline,
from the values' percentage positions between min and max.
Renders a <div> element.
Thumb
The draggable part of the slider at the tip of the indicator. Its offset along the track is set
inline.
Renders a <div> wrapping a visually hidden <input type="range">, which takes focus and carries
the thumb's value and ARIA.
Keyboard:
ArrowLeft and ArrowRight are swapped in right-to-left text direction.