Components
Slider
Pick a value or a range by dragging along a rail.
Slider picks a number, or a range with two thumbs, between min and max.
import Slider from '@hone-ui/react/Slider';Examples
<Box sx={{ display: 'grid', gap: 4, p: 2, maxWidth: 320 }}>
<Slider aria-label="Volume" defaultValue={30} />
<Slider
aria-label="Price"
defaultValue={[20, 60]}
valueLabelDisplay="on"
marks={[
{ value: 0, label: '$0' },
{ value: 100, label: '$100' },
]}
/>
</Box>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value, defaultValue | number, number[] | min | An array makes a range slider. |
onChange | (event, value, activeThumb) => void | While the value changes. | |
onChangeCommitted | (event, value) => void | When the user lets go. | |
min, max, step | number | 0, 100, 1 | The range and step. |
marks | boolean, { value, label }[] | false | Marks on the rail. |
valueLabelDisplay | 'on', 'auto', 'off' | 'off' | The value bubble over the thumb. |
valueLabelFormat | string, (value, index) => node | The bubble's text. | |
orientation | 'horizontal', 'vertical' | 'horizontal' | The direction of the rail. |
color | palette key | 'primary' | Track and thumb color. |
size | 'small', 'medium' | 'medium' | The size. |
track | 'normal', 'inverted', false | 'normal' | How the filled part shows. |
disabled, name | Standard. | ||
getAriaLabel, getAriaValueText | functions | Names and value text for each thumb. | |
sx, className, style, ref | Standard. |
Notes
step={null},scale,shiftStepanddisableSwapare not supported.
Accessibility
Each thumb is a native range input with arrow, Page and Home/End keys. Name every thumb with
aria-label, aria-labelledby or getAriaLabel.