Min/Max Dual-Range Sliders for DaisyUI (Theme-Aware)

Source: Dev.to

Problem

DaisyUI provides a range component, but it does not support dual‑handle (min/max) sliders.
This limitation becomes noticeable when building:

• price filters
• faceted search interfaces
• dashboards
• admin tools

A true min/max slider requires JavaScript for:

• multiple thumbs
• value constraints
• keyboard and touch interaction
• accessibility

Typical (Repetitive) Approach

1. Introduce a slider library (commonly noUiSlider).
2. Inspect the generated DOM.
3. Override styles to match DaisyUI.
4. Copy the setup into the next project, often with slight variations.

This pattern works but is repetitive and hard to reuse across projects.

Solution: daisy-dual-range

A small integration layer that combines noUiSlider with DaisyUI styling.

• Behavior: powered by noUiSlider.
• Styling: uses DaisyUI CSS variables (primary, accent, error, etc.).
• Scope: styles are scoped locally—no global overrides.
• Features:
  • Dual‑handle slider by default.
  • Theme‑aware via DaisyUI tokens.
  • Visual parity with native DaisyUI range inputs.
  • Automatic adaptation when the theme changes.

You can still wire the components manually if you prefer, but the packaged solution eliminates the need to reinvent the integration each time.

Why This Matters

• The choice of slider library isn’t obvious for DaisyUI projects.
• Integrating DaisyUI with noUiSlider involves non‑trivial CSS work.
• Re‑implementing the same setup across projects leads to duplicated effort.

Packaging the pattern once reduces duplication and ensures consistent, theme‑aware dual‑range sliders.

Getting Started

<!-- Add your HTML markup for the range input here -->

// Initialize daisy-dual-range (pseudo‑code)
import { initDualRange } from 'daisy-dual-range';

initDualRange('#price-range', {
  min: 0,
  max: 1000,
  start: [100, 900],
});

(Replace the import path and options with those provided by the library documentation.)

Conclusion

If you encounter the need for a min/max slider while using DaisyUI, the daisy-dual-range package offers a concise, reusable, and theme‑aware solution.