defaultValue- Type
number[]- Default
- -
- Description
- Initial value(s). Array with one element for single thumb, two for range.
Components / Inputs
Slider
சறுக்கி
Sliders let users select a value from a continuous or stepped range. Use them for settings like volume, brightness, or numeric thresholds.
சறுக்கிகள் தொடர்ச்சியான அல்லது படிப்படியான வரம்பிலிருந்து மதிப்பை தேர்ந்தெடுக்க அனுமதிக்கின்றன.
Basic slider
Component preview
Income thresholdவருமான வரம்புAnatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Track
பாதைrequired<div>Full-width horizontal track at h-1 (4px) with rounded-full. Background uses bg-primary/20 as base. The filled portion (left of thumb) uses full brand color.
2
Range
வரம்புrequired<div>Filled range indicator from min to current value using bg-primary. Width dynamically calculated. For dual-thumb ranges, fills between two values. Smooth transition on change.
3
Thumb
கட்டை விரல்required<button>Draggable circular thumb (h-5 w-5, 20px) with white fill and brand border. Arrow keys adjust by step, Home/End jump to min/max. Shows focus ring on keyboard focus. Touch-draggable.
API
Props
value- Type
number[]- Default
- -
- Description
- Controlled value.
onValueChange- Type
(value: number[]) => void- Default
- -
- Description
- Fired while dragging.
min- Type
number- Default
0- Description
- Minimum value.
max- Type
number- Default
100- Description
- Maximum value.
step- Type
number- Default
1- Description
- Increment between values.
disabled- Type
boolean- Default
false- Description
- Prevents interaction.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number[] | - | Initial value(s). Array with one element for single thumb, two for range. |
value | number[] | - | Controlled value. |
onValueChange | (value: number[]) => void | - | Fired while dragging. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Increment between values. |
disabled | boolean | false | Prevents interaction. |
Best practices
Show the current value as a label
தற்போதைய மதிப்பை லேபிளாக காட்டவும்
Always display the selected value next to the slider so users can see exactly what they are setting.
தேர்ந்தெடுக்கப்பட்ட மதிப்பை சறுக்கியுடன் காட்டுவது பயனர் என்ன அமைக்கிறார் என்று தெளிவாக புரிய வைக்கும்.
Don't omit min/max boundary labels
குறைந்தபட்ச/அதிகபட்ச எல்லை லேபிள்களை விட்டுவிடாதே
Without min/max labels, users don't know the full range they're selecting within and may make uninformed choices.
எல்லை லேபிள்கள் இல்லாமல் பயனர் முழு வரம்பு தெரியாமல் தவறான மதிப்பை தேர்வு செய்யலாம்.
Use step to constrain meaningful increments
பொருத்தமான படிகளை step மூலம் கட்டுப்படுத்தவும்
Set step=5 for percentages or step=10000 for income so the slider snaps to meaningful values only.
சதவீதத்திற்கு step=5 அல்லது வருமானத்திற்கு step=10000 அமைத்து சறுக்கி பொருத்தமான மதிப்புகளில் நிறுத்த வைக்கவும்.
Don't use Slider for exact numeric entry
துல்லியமான எண் உள்ளீட்டிற்கு Slider பயன்படுத்தாதே
Sliders are imprecise — for entering an exact number like Aadhaar or pincode, use an Input with type='number'.
சறுக்கி தோராயமான தேர்வுக்கானது — ஆதார் எண் போன்ற துல்லியமான எண்களுக்கு Input பயன்படுத்தவும்.