Slider
React Slider components are used to let user select a value from a range. Providing a smooth and interactive way to input numerical values.
Installation
Install the component using the Tailgrids CLI.
npx @tailgrids/cli add sliderAnatomy
Import the component and pass the required props.
import { Slider } from "@/registry/core/slider";
export const SliderExample = () => (
<Slider defaultValue={[50]} maxValue={100} minValue={0} />
);Examples
Default
Basic single-thumb slider.
Range
Slider with two thumbs for selecting a range of values.
Step
Slider with a custom step value.
0
20
40
60
80
100
Value Display
Sliders with text and tooltip value displays using the thumbValueType prop.
Text Value Display
The current value is displayed directly below the thumb. Ideal for visible ranges.
30
60
Tooltip Value Display
The value appears in a tooltip when interacting. Clean and focused UI.
60
Disabled
The disabled state of the slider.
API Reference
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number | number[] | - | The initial value of the slider. |
minValue | number | 0 | The smallest value allowed. |
maxValue | number | 100 | The largest value allowed. |
step | number | 1 | The increment between allowed values. |
isDisabled | boolean | false | Whether the slider is disabled. |
thumbValueType | 'hidden' | 'text' | 'tooltip' | 'hidden' | How to display the current value next to the thumb. |
onChange | (value: number | number[]) => void | - | Handler that is called when the value changes. |
className | string | - | Additional CSS classes to apply to the slider container. |
Accessibility
- Keyboard Support: Full keyboard support for navigating and adjusting the slider.
- ARIA Labels: Uses React Aria's
useSlideranduseSliderThumbto provide appropriate ARIA attributes for screen readers. - Focus Management: Proper focus ring and focus management for thumbs.