从中间开始的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%;
}