Slider
A value picked along a range.
Anatomy
<script setup>
import { Slider } from '@shardsui/vue/slider'
</script>
<template>
<Slider.Root>
<Slider.Label />
<Slider.Value />
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb />
</Slider.Track>
</Slider.Control>
</Slider.Root>
</template>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. Use the default slot of Value to compose the text yourself:
<template>
<Slider.Value v-slot="{ formattedValues }">
{{ formattedValues[0] }} to {{ formattedValues[1] }}
</Slider.Value>
</template>Thumb alignment
With the default "center" alignment, a thumb at min or max overhangs the ends of the control; thumbAlignment="edge" insets it so its edge lines up with the control's edge.
Labeling a slider
When a single-thumb slider has no visible label — a volume control, say — put an aria-label on the <Slider.Thumb>:
<template>
<Slider.Root>
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb aria-label="Volume" />
</Slider.Track>
</Slider.Control>
</Slider.Root>
</template>If the label should be visible instead, render <Slider.Label>:
<template>
<Slider.Root>
<Slider.Label>Volume</Slider.Label>
<Slider.Control>
<Slider.Track>
<Slider.Indicator />
<Slider.Thumb />
</Slider.Track>
</Slider.Control>
</Slider.Root>
</template>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:
<template>
<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>
</template>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:
<template>
<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>
</template>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:
<template>
<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>
</template>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.