I'm trying to make noUiSlider work with one class on multiple locations in the same page. Right now i have 2 sliders, both are working fine, except for a strange behavior when i change the value of the second input, it actually updates the first handle and input. I'll be gratefull if someone helps me.
function bindValues(price_slider, inputNumberMin, inputNumberMax){
price_slider.noUiSlider.on('update', function( values, handle ) {
var value = values[handle];
if ( handle ) {
inputNumberMax.value = Math.round(value);
} else {
inputNumberMin.value = Math.round(value);
}
});
inputNumberMin.addEventListener('change', function(){
price_slider.noUiSlider.set(this.value);
});
inputNumberMax.addEventListener('change', function(){
price_slider.noUiSlider.set(this.value);
});
}
var price_sliders = $('.price-filter');
var inputsNumberMin = $('.price-filter-min-price');
var inputsNumberMax = $('.price-filter-max-price');
for ( var i = 0; i < price_sliders.length; i++ ) {
noUiSlider.create(price_sliders[i], {
start: [0, 100],
connect: true,
range: {
'min': 0,
'max': 100
}
});
bindValues(price_sliders[i], inputsNumberMin[i], inputsNumberMax[i]);
}<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/11.1.0/nouislider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css" rel="stylesheet"/>
<div class="price-filter"></div>
<input type="number" class="price-filter-min-price">
<input type="number" class="price-filter-max-price">
<div class="price-filter"></div>
<input type="number" class="price-filter-min-price">
<input type="number" class="price-filter-max-price">Your problem is in this:
inputNumberMin.addEventListener('change', function(){
price_slider.noUiSlider.set(this.value);
});
inputNumberMax.addEventListener('change', function(){
price_slider.noUiSlider.set(this.value); // <<< here
});
The set method takes an array of values for the whole slider. If a single value is passed, that is set on the first handle. Instead, you'll have to be explicit about which value you want to update:
price_slider.noUiSlider.set([null, this.value]); // 'null' values are ignored.
Updated fiddle:
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments