UI Ingredients v1.6.0
Github

Slider

A component for adjusting values or selecting ranges through a draggable handle.

Anatomy

Usage

<script>
  import {Slider} from 'ui-ingredients';
</script>

<Slider.Root min={0} max={100}>
  <Slider.Label>Label</Slider.Label>

  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </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>

Range

<script>
  import {Slider} from 'ui-ingredients';

  let value = $state([0, 25]);
</script>

<Slider.Root
  min={0}
  max={100}
  {value}
  onValueChangeEnd={(detail) => {
    value = detail.value;
  }}
>
  <Slider.Label>Label</Slider.Label>

  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
    <Slider.Thumb index={1}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </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>

API Reference

Root

Prop Default Description
aria-label string[] The aria-label of each slider thumb. Useful for providing an accessible name to the slider
aria-labelledby string[] The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
defaultValue number[] The initial value of the slider when rendered. Use when you don't need to control the value of the slider.
disabled boolean Whether the slider is disabled
form string The associate form of the underlying input element.
getAriaValueText (details: ValueTextDetails) => string Function that returns a human readable value for the slider thumb
id string The unique identifier of the machine.
ids { root?: string; thumb(index: number)?: string; hiddenInput(index: number)?: string; control?: string; track?: string; range?: string; label?: string; valueText?: string; marker(index: number)?: string; } The ids of the elements in the range slider. Useful for composition.
invalid boolean Whether the slider is invalid
max 100 number The maximum value of the slider
min 0 number The minimum value of the slider
minStepsBetweenThumbs 0 number The minimum permitted steps between multiple thumbs.
name string The name associated with each slider thumb (when used in a form)
onFocusChange (details: FocusChangeDetails) => void Function invoked when the slider's focused index changes
onValueChange (details: ValueChangeDetails) => void Function invoked when the value of the slider changes
onValueChangeEnd (details: ValueChangeDetails) => void Function invoked when the slider value change is done
orientation "horizontal" "vertical" | "horizontal" The orientation of the slider
origin "start" "start" | "center" | "end" The origin of the slider range. The track is filled from the origin to the thumb for single values. - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) - "end": Useful when the value represents an offset from the end
readOnly boolean Whether the slider is read-only
step 1 number The step value of the slider
thumbAlignment "contain" "center" | "contain" The alignment of the slider thumb relative to the track - `center`: the thumb will extend beyond the bounds of the slider track. - `contain`: the thumb will be contained within the bounds of the track.
thumbSize { width: number; height: number; } The slider thumbs dimensions
value number[] The controlled value of the slider
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-dragging Present when in the dragging state
data-focus Present when focused
data-invalid Present when invalid
data-orientation The orientation of the slider
data-part root
data-scope slider

Control

Prop Default Description
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-dragging Present when in the dragging state
data-focus Present when focused
data-invalid Present when invalid
data-orientation The orientation of the control
data-part control
data-scope slider

DraggingIndicator

Prop Default Description
asChild Snippet Render a different element.
Data Attribute Value
data-orientation The orientation of the draggingindicator
data-part dragging-indicator
data-scope slider
data-state "open" | "closed"

HiddenInput

Prop Default Description
asChild Snippet Render a different element.

Label

Prop Default Description
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-dragging Present when in the dragging state
data-focus Present when focused
data-invalid Present when invalid
data-orientation The orientation of the label
data-part label
data-scope slider

Marker

Prop Default Description
value number
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-orientation The orientation of the marker
data-part marker
data-scope slider
data-state
data-value The value of the item

MarkerGroup

Prop Default Description
asChild Snippet Render a different element.
Data Attribute Value
data-orientation The orientation of the markergroup
data-part marker-group
data-scope slider

Range

Prop Default Description
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-dragging Present when in the dragging state
data-focus Present when focused
data-invalid Present when invalid
data-orientation The orientation of the range
data-part range
data-scope slider

Thumb

Prop Default Description
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-dragging Present when in the dragging state
data-focus Present when focused
data-index The index of the item
data-name
data-orientation The orientation of the thumb
data-part thumb
data-scope slider

Track

Prop Default Description
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-dragging Present when in the dragging state
data-focus Present when focused
data-invalid Present when invalid
data-orientation The orientation of the track
data-part track
data-scope slider

ValueText

Prop Default Description
asChild Snippet Render a different element.
Data Attribute Value
data-disabled Present when disabled
data-focus Present when focused
data-invalid Present when invalid
data-orientation The orientation of the valuetext
data-part value-text
data-scope slider

Accessibility

Keyboard Support

Key Description
ArrowRight Increments the slider based on defined step
ArrowLeft Decrements the slider based on defined step
ArrowUp Increases the value by the step amount.
ArrowDown Decreases the value by the step amount.
PageUp Increases the value by a larger step
PageDown Decreases the value by a larger step
Shift + ArrowUp Increases the value by a larger step
Shift + ArrowDown Decreases the value by a larger step
Home Sets the value to its minimum.
End Sets the value to its maximum.
Previous Signature Pad
Next Splitter