Range Slider
Capture input from a range of values, including optional ticks.
import { RangeSlider } from '@brainandbones/skeleton';Usage
<RangeSlider bind:value={50} max={100} step={5} ticked>Label</RangeSlider>Properties
This component makes use of $$restProps, which allows arbitrary attributes to be provided to the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Set the input value. |
| min | number | 0 | Set the input minimum range. |
| max | number | 100 | Set the input maximum range. |
| step | number | 1 | Set the input step offset. |
| ticked | boolean | false | Enables tick marks. See browser support below. |
| accent | string | accent-accent-500 | Provide classes to set the input accent color. |
Slots
| Prop | Description |
|---|---|
| Default | A label slot directly above the range slider element. |
Accessibility
ARIA Guidelines| Prop | Type | Description |
|---|---|---|
| id | string | Provide a unique input id. |
| label | string | A semantic ARIA label. |
Keyboard Interactions
| Keys | Description |
|---|---|
| Right Arrow or Up Arrow | Increase the value of the slider by one step. |
| Left Arrow or Down Arrow | Decrease the value of the slider by one step. |
| Home | Set the slider to the first allowed value in its range. |
| End | Set the slider to the last allowed value in its range. |
| Page Up | Increase the slider value by an amount larger than the step change made by Up Arrow. |
| Page Down | Decrease the slider value by an amount larger than the step change made by Up Down. |
Browser Support
This component utilizes native HTML range inputs. Browser support is limited for native datalist element, which display the generated tickmarks. Additionally, some browsers (such as Chrome) alter the track color to ensure contrast between the track and meter. Please keep accessibility in mind when utilizing this component.