具有自定义样式和动态值的滑块范围
Slider range with custom styles and dynamic values
我正在处理我想要一些奇怪行为的滑块。我一直在寻找解决方案和库，但没有找到完全符合我需要的东西，而且我在构建它时遇到了一些问题。
我正在尝试为范围值创建滑块。具有步骤、动态最小值和最大值。
我还发现使用样式效果有问题。
示例：
范围为 0 - 50 的滑块
步骤设置为 10
最小值为 16（起始值应相同）- 此时滑块应为红色
起点应该在16（我想要台阶的时候很难做到）
当值大于 16 种不同的颜色并且所有未被选中的颜色（如常规灰色）时。
我试图尽可能地使用 nouislider 和整体。如果有人有任何想法或解决方案，我将不胜感激。
您可以使用 "non-linear ranges" and "padding" 功能在 noUiSlider 中进行设置。
基本上，您需要设置三个范围：
- 0到16，无步
- 16 到 20，步长 4
- 20 到 50，步长 10
然后您可以通过设置 [16, 0] 的填充来禁用第一个子范围。
您描述的样式可以通过 styling .noUi-target 使用您的背景颜色来实现。
我正在处理我想要一些奇怪行为的滑块。我一直在寻找解决方案和库，但没有找到完全符合我需要的东西，而且我在构建它时遇到了一些问题。
我正在尝试为范围值创建滑块。具有步骤、动态最小值和最大值。 我还发现使用样式效果有问题。
示例：
范围为 0 - 50 的滑块
步骤设置为 10
最小值为 16（起始值应相同）- 此时滑块应为红色
起点应该在16（我想要台阶的时候很难做到）
当值大于 16 种不同的颜色并且所有未被选中的颜色（如常规灰色）时。
我试图尽可能地使用 nouislider 和整体。如果有人有任何想法或解决方案，我将不胜感激。
您可以使用 "non-linear ranges" and "padding" 功能在 noUiSlider 中进行设置。
基本上，您需要设置三个范围：
- 0到16，无步
- 16 到 20，步长 4
- 20 到 50，步长 10
然后您可以通过设置 [16, 0] 的填充来禁用第一个子范围。
您描述的样式可以通过 styling .noUi-target 使用您的背景颜色来实现。