JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://refreshless.com/nouislider/compile/result/jquery.nouislider.min.js"></script>
<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<div class="slider" data-blender-slider="" data-color="#FCD55D" id="cheap-to-run"></div>
<div class="slider" data-blender-slider="" data-color="#FFAE4A" id="features"></div>
<div class="slider" data-blender-slider="" data-color="#FC6F76" id="performance"></div>
<div class="slider" data-blender-slider="" data-color="#83E627" id="safety"></div>
<div class="slider" data-blender-slider="" data-color="#E685F2" id="mileage"></div>
CSS
.slider {
width:20px;
height: 190px;
margin-left: 50px;
float:left;
}
.blendercontainer {
width:50%;
height: 40%;
margin: 30px;
}
JavaScript
var sliders = $('.slider');
// This function calls .val on all sliders.
function update ( value ) {
$(this).val( (value+5), {
update: false
});
}
// Loop all sliders, so we create 5 separate Link closures.
sliders.each(function(){
// Isolate this.
var current = $(this);
// Init the slider.
current.noUiSlider({
start: 50,
step: 2,
connect: 'lower',
behaviour: 'extend-drag',
orientation: 'vertical',
direction: 'rtl',
range: {
'min': 0,
'max': 100
},
serialization: {
lower: [
$.Link({
// Pass a function to Link. As mentioned,
// the closure is unique for each slider.
// Alternatively, we could have set method to 'update'
// and supplied a Link for every other slider.
target: function( value ){
// Run the update function for all sliders
// but the one currently being handled.
update.call(sliders.not(current), value);
}
// The Link will ignore calls to .val() with the
// 'update' flag set to 'false'.
}, false)
]
}
});
});