1. Basic Usage
HTML:
<div id="slider-1"></div>JS:
const slider = DoubleRange.create({
selector: "#slider-1",
min: 30, max: 500, from: 100, to: 400,
formatter: (v) => `$ ${v}`
});2. Basic CSS Customization
CSS:
#slider-2 .double-range {
--dr-thumb-from-bg: #145056;
--dr-thumb-to-bg: #95be08;
--dr-range-bar-bg: linear-gradient(to right, #0c2e32, #145056);
}3. Min/Max Distance & Advanced Styling
JS:
// Ensure that 'from' and 'to' have at least 100 distance
const beforeFromChangeFn = (from, to) => {
if (to - from < 100) {
slider.setFrom(to - 100);
return false;
}
return true;
};
// ... similar logic for beforeToChangeFn
4. Date Range
JS:
// Using a custom date formatter
const dateFormatter = (local) => { /* ... */ };
const formatter = dateFormatter("en-US");
const slider = DoubleRange.create({
selector: "#slider-4",
min: formatter.toInt("01/01/2026"),
max: formatter.toInt("12/31/2026"),
from: formatter.toInt("03/01/2026"),
to: formatter.toInt("05/15/2026"),
formatter: formatter.fromInt,
});