具有自定义样式和动态值的滑块范围

Question

我正在研究我想要一些奇怪行为的滑块。我一直在寻找解决方案和库，但没有找到完全符合我需要的东西，而且我在构建它时遇到了一些问题。

我正在尝试为范围值创建滑块。带步数、动态最小值和最大值。 我还发现使用样式效果有问题。

例子：

范围为 0 - 50 的滑块

步长设置为 10

最小值为 16（起始值应相同） - 此时滑块应为红色

起点应该在 16 （当我想要步骤时很难做到）

当值大于 16 种不同颜色时，对于所有未选择的颜色，如常规灰色。

我试图在任何可能的地方使用 nouislider 和整体。如果有人有任何想法或解决方案，我将不胜感激。

Answer 1

您可以在 noUiSlider 中使用 "non-linear ranges" 和 "padding" 功能进行设置。

基本上，您会设置三个范围：

• 0 到 16，无步骤
• 16 到 20，4 步
• 20 到 50，步长 10

然后，您可以通过设置填充 [16, 0] 来禁用第一个子范围。

您所描述的样式可以通过styling .noUi-target 与您的背景颜色来实现。