Svelte Component

Range Sliders

Capture input from a range of values, including optional ticks.

typescript 
import { RangeSlider } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

Combines a native range input with datalist ticks to create a powerful range slider element.

Labeled

Browser Support

Please be aware that browser support varies. Safari (macOS/iOS) does not visually display the ticks. However, the ticks are progressive enhancement feature, and Safari it will honor the max and step settings in relation to the value.

Chrome

Full

Edge

Full

Safari

Partial

Firefox

Full