Подсветка пунктов/масштаба на nouislider

Я создаю шесть слайдеров, используя библиотеку 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
        }
    });
}

Любая помощь в том, как это сделать.


javascript jquery css nouislider
person Johnny Murillok    schedule 27.09.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не очень хорошо знаком с noUiSlider, но вот что я собрал из их события обновления в документация. Вы можете использовать изменения, но мне нравится первоначальное выделение. Имейте в виду, что этот метод работает только потому, что ваши значения эквивалентны показанным индексам элементов. Если бы вы начали с 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>

person Daerik    schedule 27.09.2017