javascript - 从中间开始的Javascript滑块？

Question

我需要一个从中间开始的滑块。该值应从 0 更改为 -100 和 0 更改为 +100。此外，选择（绿色）应该从中间开始，像这样

要求是使用http://rangeslider.js.org/，因为它唯一支持多个滑块的动态创建（不依赖于 elementID）或者你知道的其他一些？

codepen.io/jalle007/pen/bLpgae

任何帮助，将不胜感激。

Answer 1

您必须在您的input字段中设置属性。图书馆文档清楚地说明了如何更改值

    <input
    type="range"
    min="10"                    // default 0
    max="1000"                  // default 100
    step="10"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="vertical" // default horizontal
>

因此，您只是使用默认值而无需手动设置，默认值位于滑块中间的某个位置。您可以通过修改这些参数从任何您想要的地方开始。如果要从其他地方开始填充，则需要覆盖库默认 css 属性

    .rangeslider__fill {
    top: 0;
    height: 100%;
}

你可以重写为：

.rangeslider__fill {
    top: 0;
    left: 50%;
    height: 100%;
}