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