Kobalte.v0.13.4

Slider

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

Import

ts
import { Slider } from "@kobalte/core/slider";
// or
import { Root, Track, ... } from "@kobalte/core/slider";
// or (deprecated)
import { Slider } from "@kobalte/core";
ts
import { Slider } from "@kobalte/core/slider";
// or
import { Root, Track, ... } from "@kobalte/core/slider";
// or (deprecated)
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: 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>
<Slider.Label />
<Slider.ValueLabel />
<Slider.Track>
<Slider.Fill />
<Slider.Thumb>
<Slider.Input />
</Slider.Thumb>
</Slider.Track>
</Slider>
tsx
<Slider>
<Slider.Label />
<Slider.ValueLabel />
<Slider.Track>
<Slider.Fill />
<Slider.Thumb>
<Slider.Input />
</Slider.Thumb>
</Slider.Track>
</Slider>

Example

0

Usage

Multiple Thumbs

0, 20

Modify step size

0
0
0

Steps between thumbs

10, 20

Vertical Slider

0

Custom Value Label

$20 - $500

Controlled Value

40

API Reference

Slider

Slider is equivalent to the Root import from @kobalte/core/slider (and deprecated Slider.Root).

PropDescription
valuenumber[]
The controlled values of the slider. Must be used in conjunction with onChange.
defaultValuenumber[]
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.
invertedboolean
Whether the slider is visually inverted. Defaults to false.
minValuenumber
The minimum slider value. Defaults to 0
maxValuenumber
The maximum slider value. Defaults to 100
stepnumber
The stepping interval. Defaults to 1
minStepsBetweenThumbsnumber
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.
namestring
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.
requiredboolean
Whether the user must check a radio group item before the owning form can be submitted.
disabledboolean
Whether the radio group is disabled.
readOnlyboolean
Whether the radio group items can be selected but not changed by the user.
Data attributeDescription
data-orientation='horizontal'Present when the slider has horizontal orientation.
data-orientation='vertical'Present when the slider has vertical orientation.
data-validPresent when the slider is valid according to the validation rules.
data-invalidPresent when the slider is invalid according to the validation rules.
data-requiredPresent when the user must slider an item before the owning form can be submitted.
data-disabledPresent when the slider is disabled.
data-readonlyPresent when the slider is read only.

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

Rendered elements

ComponentDefault rendered element
Sliderdiv
Slider.Trackdiv
Slider.Filldiv
Slider.Thumbspan
Slider.Inputinput
Slider.ValueLabeldiv

Accessibility

Keyboard Interactions

KeyDescription
PageUpIncreases the value of the focused thumb by a larger step.
PageDownDecreases the value of the focused thumb by a larger step.
ArrowDownDecreases the value of the focused thumb by the step amount.
ArrowUpIncreases the value of the focused thumb by the step amount.
ArrowRightIncrements/decrements by the step value depending on orientation.
ArrowLeftIncrements/decrements by the step value depending on orientation.
HomeSets the value of the first thumb to the minimum value.
EndSets the value of the last thumb to the maximum value.