JSFiddle - React, Tailwind, and code Playground

by leongersen

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'),
    prev = 50;


sliders.on('slide', function( event, value ){
    
    // Parse a number.
    value = Number(value);
    
    // Get the direction.
    var v = ( value - prev );
    
    // Store the previous values.
    prev = value;
    
    // Loop all sliders but this one, 
    sliders.not($(this)).each(function(){
       var current = Number($(this).val());
       $(this).val( current - v );
    });    
});

sliders.each(function(){

    // Init the slider.
    $(this).noUiSlider({
        start: 50,
        step: 1,
        connect: 'upper',
        behaviour: 'extend-drag',
        orientation: 'vertical',
        direction: 'rtl',
        range: {
            'min': 0,
            'max': 100
        }
    });
});