Slider
The React Slider component lets users select a value from a range by dragging a handle. It is commonly used for inputs like volume, price range, or brightness.
It allows users to move the slider to set a value or select a range using two handles. For example, users can choose a price range from 0 to 100.
Built with React and styled using Tailwind CSS. It supports single and range sliders, step values, keyboard navigation, and accessible interactions.
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.
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.
Tooltip Value Display
The value appears in a tooltip when interacting. Clean and focused UI.
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: Users can adjust the slider value using keyboard keys when the
thumbis focused. - Focus management: Each thumb can receive focus, and focus styles appear when navigating with the keyboard.
- Value control: Users can move the thumb to increase or decrease the value within the defined
rangeandstep. - Range support: When using two thumbs, users can control both
minimumandmaximumvalues independently. - Disabled state: When
disabled, the slider cannot be focused or changed. - Screen reader support: Provide clear labels for the slider so screen readers can describe its purpose and current value.
