Range Sliders

Svelte Component

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

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

Getting Started

Combines a native range input with datalist ticks.

html 
<RangeSlider name="range-slider" bind:value={50} max={100} step={5} ticked>Label</RangeSlider>

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