Slider

An input component that allows users to select a value or range from a continuous or discrete set of values by dragging a thumb along a track.

Anatomy 

<script>
  import {
    Slider,
    SliderRoot,
    SliderControl,
    SliderTrack,
    SliderRange,
    SliderThumb,
    SliderLabel,
    SliderValueText,
    SliderMarkerGroup,
    SliderMarker,
  } from "@saas-ui/svelte/components/slider";
</script>

<Slider.Root defaultValue={[50]}>
  <Slider.Label>Volume</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0} />
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={25}>25%</Slider.Marker>
    <Slider.Marker value={50}>50%</Slider.Marker>
    <Slider.Marker value={75}>75%</Slider.Marker>
  </Slider.MarkerGroup>
</Slider.Root>

Examples

Basic Accessibility

Basic slider with default styling.

Change End Accessibility

Use onValueChangeEnd to capture the final value after dragging.

Colours Accessibility

Use the colour prop to change the colour theme.

Controlled Accessibility

Use value and onValueChange props for controlled sliders.

Disabled Accessibility

Use the disabled prop to disable the slider.

Label Accessibility

Use the Slider.Label component to add a label to the slider.

Marks Accessibility

Use the Slider.MarkerGroup and Slider.Marker components to display value markers.

Range Accessibility

Use multiple thumbs for range selection.

Sizes Accessibility

Use the size prop to change the size of the slider.

Steps Accessibility

Use the step prop to set increment values.

Variants Accessibility

Use the variant prop to change the visual style.

Vertical Accessibility

Use orientation="vertical" for vertical sliders.

Props

Slider.Root

The slider container that provides context to all child components.

Prop Type Default Description
children Snippet - Content to render inside the slider (composition API).
class string - Additional CSS classes to apply.
size "sm" | "md" | "lg" "md" The size of the slider.
variant "outline" | "solid" "outline" The visual variant of the slider.
orientation "horizontal" | "vertical" "horizontal" The orientation of the slider.
colour ColourName "gray" The colour palette.
disabled boolean false Whether the slider is disabled.
value number[] - The controlled value of the slider.
defaultValue number[] - The initial value of the slider.
min number 0 The minimum value of the slider.
max number 100 The maximum value of the slider.
step number 1 The step value of the slider.
name string - The name for the hidden input.
onValueChange (details: { value: number[] }) => void - Function invoked when the value changes.
onValueChangeEnd (details: { value: number[] }) => void - Function invoked when the value change ends.

Slider.Control

The control container that holds the track and thumb.

Prop Type Default Description
children Snippet - Content to render inside the control (typically Track and Thumb).
class string - Additional CSS classes to apply.

Slider.Track

The track that shows the slider's range.

Prop Type Default Description
children Snippet - Content to render inside the track (typically Range).
class string - Additional CSS classes to apply.

Slider.Range

The filled range portion of the track.

Prop Type Default Description
class string - Additional CSS classes to apply.

Slider.Thumb

The draggable thumb element.

Prop Type Default Description
index number - The index of the thumb (for range sliders, 0 for first thumb, 1 for second, etc).
children Snippet - Content to render inside the thumb.
class string - Additional CSS classes to apply.
name string - The name for the hidden input.

Slider.Label

The label for the slider.

Prop Type Default Description
children Snippet - Content to render as the label.
class string - Additional CSS classes to apply.

Slider.ValueText

Displays the current slider value.

Prop Type Default Description
children Snippet - Content to render as the value text.
class string - Additional CSS classes to apply.

Slider.MarkerGroup

Container for slider markers.

Prop Type Default Description
children Snippet - Content to render inside the marker group (typically Marker components).
class string - Additional CSS classes to apply.

Slider.Marker

Individual marker for indicating specific values on the slider.

Prop Type Default Description
value number - The value at which to place the marker.
children Snippet - Content to render inside the marker.
class string - Additional CSS classes to apply.
showDot boolean true Whether to show a dot indicator.