Daisy Dual Range
DaisyUI-styled dual-range slider for vanilla JS, Vue, and Svelte
daisy-dual-range
Framework-agnostic dual range (two-thumb) slider styled to match DaisyUI, powered by noUiSlider.
Install
npm i daisy-dual-range nouislider
Import CSS
Both CSS files are required:
// Required: noUiSlider base styles
import "nouislider/dist/nouislider.css";
// Required: daisy-dual-range DaisyUI styling
import "daisy-dual-range/style.css";
Note: The noUiSlider CSS is essential for the slider to render. It provides the base structure for the slider track, handles, and interactive elements. The daisy-dual-range CSS only provides the DaisyUI-themed styling on top of the base noUiSlider styles.
Quick Start
import "nouislider/dist/nouislider.css";
import "daisy-dual-range/style.css";
import { createDaisyDualRange } from "daisy-dual-range";
document.addEventListener("DOMContentLoaded", () => {
const sliderEl = document.getElementById("priceSlider");
const slider = createDaisyDualRange(sliderEl, {
min: 0,
max: 1000,
value: [100, 700],
step: 10,
color: "primary",
});
slider.on("update", ([min, max]) => {
console.log(min, max);
});
});
HTML Requirements: For proper DaisyUI theming, ensure your HTML element has a data-theme attribute:
<html lang="en" data-theme="light">
API
daisy-dual-range is a wrapper around noUiSlider that provides DaisyUI-styled dual range sliders. The returned instance exposes the underlying noUiSlider instance via the noUi property for advanced usage.
createDaisyDualRange(target, options)
target: HTMLElement | string
options:
min:numbermax:numbervalue?:[number, number](default[min, max])step?:number(default1)color?:"primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error"disabled?:booleandecimals?:numbertooltips?:booleannoui?:object(escape hatch for extra noUiSlider options)
Returned instance:
get():[number, number]set([minOrNull, maxOrNull])on(event, cb)=>unsubscribedisable(),enable(),destroy()el,noUi
License
MIT
