Slider
A Slider component is a UI element that allows users to select a value from a range by sliding a handle along a track. It provides an interactive way to adjust settings, such as volume, brightness, or other continuous values, with smooth transitions. Sliders can be single or multi-valued, enabling users to make precise selections visually, enhancing the overall user experience.
# Demo
Basic Slider Examples
Simple slider components with different configurations.
Single Value Slider
Current value: 50
Range Slider
Range: 25 - 75
Step Slider
Current value: 5
Themed Sliders
Sliders with icons and contextual styling.
Volume Control
Mute70%Max
Brightness
Dark80%Bright
Temperature
16°C22°C30°C
Quality Rating
Poor
8
ExcellentAudio Settings Panel
Multiple sliders for audio configuration.
Audio Configuration
75%
50%
60%
C
LeftCenterRight
Display Settings Panel
Visual settings with real-time preview.
Display Configuration
80%
70%
65%
50°
Preview
Disabled Slider
Slider in disabled state.
This slider is disabled and cannot be interacted with.
Vertical Sliders
Sliders with vertical orientation.
Equalizer
601kHz
803kHz
455kHz
907kHz
709kHz
5511kHz
8513kHz
Slider Best Practices
Guidelines for effective slider implementation.
✅ Do
- • Provide clear labels and value indicators
- • Use appropriate min/max ranges
- • Choose sensible step values
- • Show current values prominently
- • Use icons for context when helpful
- • Provide immediate visual feedback
- • Consider keyboard navigation
❌ Don't
- • Use sliders for precise value entry
- • Make sliders too small to interact with
- • Use unclear or missing labels
- • Set inappropriate step sizes
- • Forget to show current values
- • Use sliders for binary choices
- • Ignore accessibility requirements
Slider Values Summary
Current values and interaction history.
Current Values
Basic Slider:50
Range:25 - 75
Volume:70%
Brightness:80%
Temperature:22°C
Quality:8/10
Recent Changes
No changes yet. Try adjusting some sliders above.
Total interactions: 0
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| label | React.ReactNode | Optional | Label for the slider. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| labelClassName | string | ' ' | You can customise by passing tailwind classes. |
| sliderClassName | string | ' ' | You can customise by passing tailwind classes. |
| id | string | Optional | ID for the slider. |
| value | number | Optional | Current slider value. |
| defaultValue | number | Optional | Default slider value. |
| min | number | Optional | Minimum slider value. |
| max | number | Optional | Maximum slider value. |
| step | number | Optional | Step increment for slider. |
| disabled | boolean | false | Whether the slider is disabled. |
| orientation | 'horizontal' | 'vertical' | Optional | Orientation of the slider. |
| onChange | (value: number) => void | Optional | Callback when value changes. |
| aria-label | string | Optional | ARIA label for accessibility. |
| aria-labelledby | string | Optional | ARIA labelledby for accessibility. |
| aria-valuetext | string | Optional | ARIA value text for accessibility. |
# Tags