在 nouislider 上突出显示 pips/scale

Question

我正在使用 nouislider 库构建六个滑块。

我在滑块上添加了点数。我想突出显示相关滑块打开的点值，并在滑块移动时进行相应更新。

我已经创建了一个 jsFiddle 我目前所做的。

HTML:

<div class="sliders" id="slider1"></div>
<br/>
<div class="sliders" id="slider2"></div>
<br/>
<div class="sliders" id="slider3"></div>
<br/>
<div class="sliders" id="slider4"></div>
<br/>
<div class="sliders" id="slider5"></div>
<br/>
<div class="sliders" id="slider6"></div>

JS:

var sliders = document.getElementsByClassName('sliders');

for (var i = 0; i < sliders.length; i++) {

    noUiSlider.create(sliders[i], {
        start: 0,
        step: 1,
        connect: "lower",
        orientation: "horizontal",
        range: {
            'min': 0,
            'max': 5
        },
        pips: {
            mode: 'values',
            values: [0, 1, 2, 3, 4, 5],
            density: 100
        }
    });
}

有关如何完成此操作的任何帮助。

Answer 1

我对 noUiSlider 不是很熟悉，但这是我从他们在 documentation 的更新活动中收集的一些东西。您可以使用更改，但我喜欢最初的突出显示。请记住，此方法仅适用于您的值等同于显示的元素索引。如果您从 1 或任何其他值开始，则需要找到一种不同的方法来定位 .noUi-value.

/* Loop Through Sliders */
$('.sliders').each(function() {
    /* Variable Defaults */
    var slider = this;
    
    /* Init noUiSlider */
    noUiSlider.create(slider, {
        start: 0,
        step: 1,
        connect: "lower",
        orientation: "horizontal",
        range: {
            'min': 0,
            'max': 5
        },
        pips: {
            mode: 'values',
            values: [0, 1, 2, 3, 4, 5],
            density: 100
        }
    });

    /* Bind Update Event to noUiSlider */
    slider.noUiSlider.on('update', function(values) {
        /* Set Maximum Position */
        var maxPos = Math.max(values);
        
        /* Add Highlight Class to Pip */
        $(slider).find('.noUi-value:visible').removeClass('highlight').eq(maxPos).addClass('highlight');
    });
});

.sliders {
 margin-top: 40px;
}

.noUi-pips-horizontal:last-child .noUi-marker-large, .noUi-marker-sub {
 display: none;
}

.noUi-pips-horizontal {
 top: -55px !important;
}

/* Highlight CSS */
.noUi-value.highlight {
 color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" rel="stylesheet"/>
<div class="sliders" id="slider1"></div>
<br>
<div class="sliders" id="slider2"></div>
<br>
<div class="sliders" id="slider3"></div>
<br>
<div class="sliders" id="slider4"></div>
<br>
<div class="sliders" id="slider5"></div>
<br>
<div class="sliders" id="slider6"></div>

在 nouislider 上突出显示 pips/scale

Highlighting pips/scale on nouislider

javascript

css

jquery

nouislider