Slider

An accessible slider component for selecting numeric values from a range.

Basic Usage

Volume

Range Slider (Two Thumbs)

Use an array value to create a range slider with multiple thumbs.

Price Range

Multi-Range Slider

Create sliders with 3 or more thumbs for complex selections.

Multi-point Selection

Vertical Slider

Temperature

Custom Min, Max, and Step

Adjustment (-10 to 10)

With x-model

Volume

Current volume:

With Markers

Add visual markers at specific values along the track.

Volume

Read-Only State

Progress (read-only)

Disabled State

Volume (disabled)

Formatted Values

Budget

With Change Event

Slider

API Reference

Component Props

Prop	Type	Default	Description
value	number | number[]	0	Single value or array of values for multiple thumbs
min	number	0	Minimum allowed value
max	number	100	Maximum allowed value
step	number	1	Value increment/decrement step
orientation	'horizontal' | 'vertical'	'horizontal'	Slider orientation
disabled	boolean	false	Whether the slider is disabled
readOnly	boolean	false	Whether the slider is read-only
name	string	-	Name for form submission
formatOptions	Intl.NumberFormatOptions	-	Options for formatting displayed values

Parts

Part	Description
x-slider:root	Root container element
x-slider:label	Label element
x-slider:control	Track container (clickable area)
x-slider:track	Background track
x-slider:range	Filled range (from min to value, or between thumbs)
x-slider:thumb="index"	Draggable thumb element (index starts at 0)
x-slider:marker="value"	Visual marker at a specific value position
x-slider:output	Value display element
x-slider:hidden-input="index"	Hidden input for form submission (optional)

Data Attributes

Attribute	Description
data-disabled	Present when slider is disabled
data-orientation	Current orientation (horizontal or vertical)
data-index	Thumb index (on thumb elements)

Events

Event	Detail	Description
change	{ value, values }	Fired when slider value changes

Keyboard Interactions

Key	Description
ArrowRight / ArrowUp	Increase value by step
ArrowLeft / ArrowDown	Decrease value by step
PageUp	Increase value by 10× step
PageDown	Decrease value by 10× step
Home	Set to minimum value
End	Set to maximum value
Tab	Move focus to next/previous thumb

Accessibility

This component follows the WAI-ARIA Slider Pattern:

• Uses role="slider" on thumb elements
• Provides aria-valuenow, aria-valuemin, aria-valuemax attributes
• Supports aria-valuetext for formatted value announcements
• Implements all required keyboard interactions
• Manages focus properly between multiple thumbs
• Prevents thumbs from crossing each other

Styling

The slider is completely unstyled by default. Use the data attributes and parts to style it:

/* Track */
[data-part="track"] {
  /* Background track styles */
}

/* Filled range */
[data-part="range"] {
  /* Filled portion styles */
}

/* Thumb */
[data-part="thumb"] {
  /* Thumb styles */
}

/* Disabled state */
[data-disabled] [data-part="thumb"] {
  /* Disabled thumb styles */
}

/* Vertical orientation */
[data-orientation="vertical"] [data-part="control"] {
  /* Vertical slider styles */
}

Tips

• Use arrays for the value prop to create range sliders with multiple thumbs
• Thumbs automatically prevent crossing each other
• Click anywhere on the track to move the nearest thumb to that position
• The range part automatically positions itself between the first and last thumb
• For vertical sliders, set appropriate height on the control element
• Use formatOptions to display currency, percentages, or other formatted values