Slider
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
- Container: The outermost element with class
slider. - Track: The background bar, class
slider-track. - Progress: The filled portion, class
slider-progress(with color modifier). - Marks: Mark points, class
slider-marksandslider-marks-item. - Dot: Mark dot, class
slider-dot(within-range/out-range). - Label: Mark label, class
slider-label. - Thumb: Native input[type=range] thumb, styled via
par-input-sliderand browser pseudo-elements. - Indicator: Value indicator, class
indicator-wrapperandslider-thumb-indicator-text.
States
- Enabled: Default state, interactive.
- Hovered: Thumb hovered (via input[type=range]), shows state layer.
- Active/Dragging: Thumb active (input[type=range]), cursor changes.
- Focused: Thumb focused (input[type=range]), outline visible.
- Disabled: All elements have reduced opacity and pointer-events disabled.
- Range: Two thumbs and two indicators.
Options
- mode: 'single' | 'range' (default: 'single')
- min: number (default: 0)
- max: number (default: 100)
- step: number (default: 1)
- defaultValue: number | [number, number] (default: 0 or [0, 50])
- marks: array of objects with
value(number) and optionallabel(string) - color: 'neutral' | 'accent' (default: 'neutral')
- orientation: 'horizontal' | 'vertical' (default: 'horizontal')
- indicator: 'normal' | 'tooltip' (default: 'normal')
- indicatorSide: 'normal' | 'reverse' (default: 'normal')
- disabled: boolean (default: false)
- onValueChange: (value: number | [number, number]) => void
- ...divProps: All native div props (className, style, ...)
Behaviors
- Supports both single and range selection.
- Keyboard accessible: arrow keys, Home/End, PageUp/PageDown.
- Responsive: vertical and horizontal layouts.
- Marks and labels are optional and customizable.
- Tooltip indicator shows value on focus/hover if enabled.
- Disabled state prevents all interaction.
- Color and orientation can be changed via props.
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| YYYY-MM-DD | new | Initial design | Oanh Nguyen | PAR-52 |