Dual-Handle Range Slider Example

Download Back To CSSScript.Com

Build accessible dual-handle range sliders with vanilla JavaScript. Zero dependencies, full keyboard support, and flexible configuration options.

Example 1: Basic Range

HTML:
<div data-range-slider data-min="0" data-max="100" data-min-value="25" data-max-value="75"></div>

Example 2: Price Range with Callback

Current range: $100 - $500

HTML:
<div data-range-slider data-min="0" data-max="1000" data-label-prefix="$" data-on-change="handlePriceChange"></div>

Example 3: Year Range

HTML:
<div data-range-slider data-min="1990" data-max="2025" data-step="5"></div>

Example 4: Weight Range with Suffix

HTML:
<div data-range-slider data-min="0" data-max="100" data-label-suffix="kg"></div>