Min/Max 双范围滑块（适用于 DaisyUI，主题感知）

Source: Dev.to

问题

DaisyUI 提供了 range 组件，但 不 支持双柄（最小/最大）滑块。
当构建以下场景时，这一限制会变得明显：

• 价格过滤器
• 分面搜索界面
• 仪表盘
• 管理后台工具

真正的最小/最大滑块需要 JavaScript 来实现：

• 多个拇指（thumb）
• 值约束
• 键盘和触摸交互
• 可访问性

典型（重复）做法

1. 引入一个滑块库（常见的 noUiSlider）。
2. 检查生成的 DOM。
3. 覆盖样式以匹配 DaisyUI。
4. 将该设置复制到下一个项目中，通常会有细微差别。

这种模式可行，但重复且难以在项目之间复用。

解决方案：daisy-dual-range

一个小型集成层，将 noUiSlider 与 DaisyUI 样式结合。

• 行为：由 noUiSlider 提供动力。
• 样式：使用 DaisyUI CSS 变量（primary、accent、error 等）。
• 作用域：样式局部作用——不进行全局覆盖。
• 特性：
  • 默认双柄滑块。
  • 通过 DaisyUI 令牌感知主题。
  • 与原生 DaisyUI range 输入在视觉上保持一致。
  • 主题切换时自动适配。

如果你愿意，也可以手动连接组件，但打包好的解决方案消除了每次都要重新实现集成的需求。

为什么这很重要

• 对于 DaisyUI 项目来说，选择哪个滑块库并不明显。
• 将 DaisyUI 与 noUiSlider 集成需要非 trivial 的 CSS 工作。
• 在多个项目中重复实现相同的设置会导致工作重复。

一次性打包该模式即可减少重复工作，并确保主题感知的双范围滑块保持一致。

入门指南

<!-- 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],
});

（将导入路径和选项替换为库文档中提供的内容。）

结论

如果在使用 DaisyUI 时遇到需要最小/最大滑块的情况，daisy-dual-range 包提供了一个简洁、可复用且主题感知的解决方案。