Range sliders
Practical patterns for thoughtful interfaces.
noUiSlider supplies accessible dual-handle and stepped sliders.
Primary example
Budget range
More possibilities
Stepped slider
Drag either handle, click the track, or use the arrow keys when a handle has focus.
Usage
noUiSlider.create(element, { start: [20, 80], connect: true, range: { min: 0, max: 100 } });