Slider
Preview
index.tsx
Range
Preview
index.tsx
Vertical
Preview
index.tsx
Indicator reverse
Preview
index.tsx
Preview
index.tsx
Accent color
Preview
index.tsx
Disabled
Preview
index.tsx
Design Tokens for Slider
| Token | Color for | State/Meaning |
|---|
| --par-color-border-slider-track-enabled | Slider track | Default/Enabled |
| --par-color-border-slider-progress-neutral-enabled | Slider progress (neutral) | Default/Enabled |
| --par-color-border-slider-progress-accent-enabled | Slider progress (accent) | Default/Enabled |
| --par-color-border-slider-thumb-enabled | Slider thumb border | Default/Enabled |
| --par-color-bg-slider-thumb-enabled | Slider thumb background | Default/Enabled |
| --par-color-bg-slider-state-layer-hovered | Thumb hover state layer | Hovered |
| --par-color-border-slider-discrete-neutral-active | Mark dot (in range) | Active |
| --par-color-border-slider-discrete-neutral-enabled | Mark dot (out range) | Default |
| --par-color-text-primary | Indicator text | Any |
Slider API Reference
<Slider />
| Prop | Type | Default | Description |
|---|
| mode | 'single' | 'range' | 'single' | Slider mode (single value or range) |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Step increment |
| defaultValue | number | [number, number] | 0 | [0,50] | Initial value |
| marks | Array of mark objects | [] | Mark points on the slider |
| color | 'neutral' | 'accent' | 'neutral' | Slider color |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Slider orientation |
| indicator | 'normal' | 'tooltip' | 'normal' | Indicator type |
| indicatorSide | 'normal' | 'reverse' | 'normal' | Indicator position |
| disabled | boolean | false | Disable the slider |
| onValueChange | function (value) | | Callback when value changes |
| ...divProps | HTMLDivElement props | | All native div props (className, style, ...) |
Note: Slider inherits all native props from HTMLDivElement.