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上突出点数/比例

1 个答案: