防止滑块上的范围值重叠noUiSlider

如何解决防止滑块上的范围值重叠noUiSlider

我在一个由30天及以后的时间组成的滑块上有3个范围的集合（请参见CodePen）。目前，这三个范围之间的值重叠了一天。

var slider = document.getElementById("slider");
var unconstrainedValues = document.getElementById("unconstrained-values");

noUiSlider.create(slider,{
    start: [0,7],padding: [0,1],connect: [true,true,true],range: {
        min: 0,max: 31
    },pips: {
        mode: "values",values: [0,7,14,21,28,30],density: 3
    },step: 1,range: {
        min: [0],max: [31]
    },format: wNumb({
        // https://refreshless.com/wnumb/
        decimals: 0,mark: ".",thousad: ",",prefix: ""
        // suffix: ' p.p.'
    }),tooltips: true
});

var nodes = [
    document.getElementById("daily-rate-a"),// 0
    document.getElementById("daily-rate-b"),// 0
    document.getElementById("daily-rate-c") // 0
];

slider.noUiSlider.on("update",function (
    values,handle,unencoded,isTap,positions
) {
    nodes[handle].innerHTML = values[handle];
});

// var tooltips = document.querySelectorAll('.noUi-tooltip');
// console.log(tooltips);
// tooltips.forEach(tooltip => tooltip.classList.add('tooltips-active'));

var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var inputs = document.querySelectorAll(".form-control");

var connect = slider.querySelectorAll(".noUi-connect");
var classes = ["c-1-color","c-2-color","c-3-color"];

for (var i = 0; i < connect.length; i++) {
    connect[i].classList.add(classes[i]);
}

slider.noUiSlider.on("update",function (values) {
    unconstrainedValues.innerHTML = values.join(" - ");
});

当前结果：

• 0-15
• 15-20
• 20-无穷大

所需结果：

• 0-15
• 16-20
• 21-无穷大

从本质上讲，下一个范围的开始永远不能与上一个范围的结束具有相同的值。 （范围A中的0和范围C中的Infinity都是静态的，永远不会改变。）我该如何实现？

解决方法

在创建时使用margin选项

margin: 1

noUiSlider.create(slider,{
    start: [0,7],...
    margin: 1 // Newly added
    ...
    tooltips: true
});

范围3的实现

• 选项更改

start: [0,16,21]
connect: [true,true,true]

• noUiSlider.on中的事件函数更改

values[0 ~ 2]

因此，可以正常工作的js / html

<script src=""https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.3/nouislider.min.js">
<div class="container">
    <table>
        <tr class="th">
            <td>SEQUENCE</td>
            <td>RATE</td>
            <td>DAYS ACTIVE</td>
        </tr>
        <tr class="daily-rate-a">
            <td>Daily Rate A</td>
            <td><input type="number" placeholder="0.00" required name="price" min="0" value="" step="0.01" title="Currency"></td>
            <td><span class="example-val" id="unconstrained-value-a"></span>
            </td>
        </tr>
        <tr class="daily-rate-b">
            <td>Daily Rate B</td>
            <td><input type="number" placeholder="0.00" required name="price" min="0" value="" step="0.01" title="Currency"></td>
            <td><span class="example-val" id="unconstrained-value-b"></span></td>
        </tr>
        <tr class="daily-rate-c">
            <td>Daily Default<span class="required">*</span></td>
            <td><input type="number" placeholder="0.00" required name="price" min="0" value="" step="0.01" title="Currency"></td>
            <td><span class="example-val" id="unconstrained-value-c"></span></div>
            </td>
        </tr>
    </table>

    <h3>Agreement Day Timeline</h3>

    <div id="slider"></div>
    <div class="infinity">∞</div>
</div>

var slider = document.getElementById("slider");
var unconstrainedValueA = document.getElementById("unconstrained-value-a");
var unconstrainedValueB = document.getElementById("unconstrained-value-b");
var unconstrainedValueC = document.getElementById("unconstrained-value-c");

noUiSlider.create(slider,21],padding: [0,1],margin: 1,connect: [true,true],range: {
        min: 0,max: 31
    },pips: {
        mode: "values",values: [0,7,14,21,28,30],density: 3
    },step: 1,range: {
        min: [0],max: [31]
    },format: wNumb({
        // https://refreshless.com/wnumb/
        decimals: 0,mark: ".",thousad: ",",prefix: ""
        // suffix: ' p.p.'
    }),tooltips: true
});

var nodes = [
    document.getElementById("daily-rate-a"),// 0
    document.getElementById("daily-rate-b"),// 0
    document.getElementById("daily-rate-c") // 0
];

var tooltips = document.querySelectorAll('.noUi-tooltip');
console.log(tooltips);
tooltips.forEach(tooltip => tooltip.classList.add('tooltips-active'));

var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var inputs = document.querySelectorAll(".form-control");

var connect = slider.querySelectorAll(".noUi-connect");
var classes = ["c-1-color","c-2-color","c-3-color"];

for (var i = 0; i < connect.length; i++) {
    connect[i].classList.add(classes[i]);
}

slider.noUiSlider.on("update",function (values) {
    unconstrainedValueA.innerHTML = values[0] + ' - ' + (values[1] - 1);
    unconstrainedValueB.innerHTML = values[1] + ' - ' + (values[2] - 1);
    unconstrainedValueC.innerHTML = values[2] + ' - ' + '∞';
});