A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.
ts
import{XDSSlider}from'@xds/core/Slider'
Best practices
Guidance
Practices
Do
Always provide a label, even if visually hidden, so the slider is accessible to screen readers.
Do
Format values with meaningful units like "$50" or "75%" instead of raw numbers.
Don't
Use for precise numeric entry — pair with a text input or use NumberInput instead.
Don't
Set a step size so large that only a few positions are possible — use SegmentedControl or radio buttons instead.
Examples
Common configurations, variations, and states.
Slider — Formatted Value
Slider with custom formatting showing temperature in Fahrenheit.
Slider — Range
Range slider for selecting a value range like price bounds.
Slider — With Marks
Slider with labeled tick marks at fixed intervals.
Slider — Validation States
Sliders with error, warning, and success validation states.