Inputalternative
Use Input for precise numeric entrySlider
Range input control for selecting a numeric value within a defined range. Supports labels, value display, and custom step intervals.
Setup
import { Slider } from '@fragments-sdk/ui';Examples
Default
Basic slider with label
Loading preview...
With Value Display
Shows current value alongside the slider
Loading preview...
Custom Range
Custom min, max, and step values
Loading preview...
Controlled
Controlled slider with external state
Loading preview...
Drag Value Bubble
Shows a floating value bubble while the thumb is being dragged
Loading preview...
With Helper Text
Slider with helper text guidance
Loading preview...
Disabled
Disabled slider
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Not set | Label text |
helperText | string | Not set | Helper text shown below the slider |
error | boolean | false | Show error styling |
value | number | Not set | Controlled value |
defaultValue | number | Not set | Default value for uncontrolled usage |
onChange | function | Not set | Called with new value when changed |
onValueChange | function | Not set | Alias for onChange (Radix convention): (value: number) => void |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step interval |
showValue | boolean | false | Display current value |
showValueOnDrag | boolean | false | Show current value in a floating bubble while dragging the thumb |
valueSuffix | string | | Suffix after value (e.g., "%", "px") |
disabled | boolean | false | Disable the slider |
name | string | Not set | — |
aria-label | string | Not set | Accessible label when visible label is omitted |
aria-labelledby | string | Not set | Accessible labelled-by relationship |
aria-describedby | string | Not set | Accessible described-by relationship |
id | string | Not set | — |
Usage Guidelines
When to use
- Selecting a value from a continuous range
- Volume or brightness controls
- Price range filters
- Settings that benefit from visual feedback
When not to use
- Precise numeric input (use Input type="number")
- Discrete options (use RadioGroup or Select)
- Yes/no choices (use Switch)
Best practices
- Always provide a label describing what the slider controls
- Show the current value when precision matters
- Use appropriate min/max values for the context
- Consider step size for usability
Accessibility
- Label is associated with the slider
- Keyboard accessible with arrow keys
- Current value is announced to screen readers
- Uses native slider semantics