Slider

An input where the user selects a value from within a given range.

Import

ts
import { Slider } from "@kobalte/core";

ts
import { Slider } from "@kobalte/core";

Features

Follow the WAI ARIA Slider design pattern.
Can be controlled or uncontrolled.
Support for multiple thumbs.
Support a minimum step between thumbs.
Support click or touch on track to change value.
Support right or left direction.
Support for custom value label.

Anatomy

The slider consists of:

Slider.Root: The root container for the slider.
Slider.Track: The component that visually represents the slider track.
Slider.Fill: The component that visually represents the slider value.
Slider.Thumb: The thumb that is used to visually indicate a value in the slider.
Slider.Input: The native html input that is visually hidden in the slider thumb.
Slider.Label: The label that gives the user information on the slider.
Slider.ValueLabel: The accessible label text representing the current value in a human-readable format.

tsx
<Slider.Root>
	<Slider.Label />
	<Slider.ValueLabel />
	<Slider.Track>
		<Slider.Fill />
		<Slider.Thumb>
			<Slider.Input />
		</Slider.Thumb>
	</Slider.Track>
</Slider.Root>

tsx
<Slider.Root>
	<Slider.Label />
	<Slider.ValueLabel />
	<Slider.Track>
		<Slider.Fill />
		<Slider.Thumb>
			<Slider.Input />
		</Slider.Thumb>
	</Slider.Track>
</Slider.Root>

Example

Label

Usage

Multiple Thumbs

Label

0, 20

Modify step size

Step size 8

Step size 10

Step size 20

Steps between thumbs

Label

10, 20

Vertical Slider

Label

Custom Value Label

Money

$20 - $500

Controlled Value

Label

API Reference

Slider.Root

Prop	Description
value	`number[]` The controlled values of the slider. Must be used in conjunction with `onChange`.
defaultValue	`number[]` The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
onChange	`(value: number[]) => void` Event handler called when the value changes.
onChangeEnd	`(value: number[]) => void` Event handler called when the value changes at the end of an interaction.
inverted	`boolean` Whether the slider is visually inverted. Defaults to false.
minValue	`number` The minimum slider value. Defaults to 0
maxValue	`number` The maximum slider value. Defaults to 100
step	`number` The stepping interval. Defaults to 1
minStepsBetweenThumbs	`number` The minimum permitted steps between thumbs. Defaults to 0
getValueLabel	`(params: GetValueLabelParams) => string` A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as a percentage of the max value.
orientation	`'horizontal' \| 'vertical'` The orientation of the slider.
name	`string` The name of the slider, used when submitting an HTML form.
validationState	`'valid' \| 'invalid'` Whether the slider should display its "valid" or "invalid" visual styling.
required	`boolean` Whether the user must check a radio group item before the owning form can be submitted.
disabled	`boolean` Whether the radio group is disabled.
readOnly	`boolean` Whether the radio group items can be selected but not changed by the user.

Data attribute	Description
data-orientation='horizontal'	Present when the slider has horizontal orientation.
data-orientation='vertical'	Present when the slider has vertical orientation.
data-valid	Present when the slider is valid according to the validation rules.
data-invalid	Present when the slider is invalid according to the validation rules.
data-required	Present when the user must slider an item before the owning form can be submitted.
data-disabled	Present when the slider is disabled.
data-readonly	Present when the slider is read only.

Slider.ValueLabel, Slider.Fill, Slider.Input, Slider.Thumb and Slider.Track share the same data-attributes.

Rendered elements

Component	Default rendered element
`Slider.Root`	`div`
`Slider.Track`	`div`
`Slider.Fill`	`div`
`Slider.Thumb`	`span`
`Slider.Input`	`input`
`Slider.ValueLabel`	`div`

Accessibility

Keyboard Interactions

Key	Description
`PageUp`	Increases the value of the focused thumb by a larger `step`.
`PageDown`	Decreases the value of the focused thumb by a larger `step`.
`ArrowDown`	Decreases the value of the focused thumb by the `step` amount.
`ArrowUp`	Increases the value of the focused thumb by the `step` amount.
`ArrowRight`	Increments/decrements by the `step` value depending on `orientation`.
`ArrowLeft`	Increments/decrements by the `step` value depending on `orientation`.
`Home`	Sets the value of the first thumb to the minimum value.
`End`	Sets the value of the last thumb to the maximum value.