JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<div class="slidercontent">
<div class="slidertitles">
    <ul>
        <li>1:</li>
        <li>2:</li>
        <li>3:</li>
        
    </ul>
</div>
<div class="conteneur">
    <div id="slider_1" class="selector inactive sliderhome"></div>
    <div style="clear"></div>
    <div id="slider_2" class="selector inactive sliderhome"></div>
    <div style="clear"></div>
    <div id="slider_3" class="selector inactive sliderhome"></div>
    <div style="clear"></div>    

</div> 

<div class="divedeeper input-append">
    <ul>
    <li> <input type="text" id="appendedInput" class="1percent">%</li>
    <li> <input type="text" id="appendedInput" class="2percent">%</li>
    <li> <input type="text" id="appendedInput" class="3percent">% </li>
    </ul>
    </div>
</div>

CSS

.conteneur
{
    width: 270px;
margin: auto;
float: left;
margin-top: 25px;
margin-left: 37px;
}

.sliderhome {
margin-bottom: 50px !important;
margin-top: 1px !important;}
#p1,
#p2,
#p3
{
    width: 50px;
    float: right;
    margin-right: 40px;
    padding-top: 4px;
}
.ui-slider
{
    float: left;
    position: relative;
    width: 250px;
    height: 10px;
    background: #6b6b6b;
    margin: 20px;
    border-radius: 1000px;
    box-shadow:inset 0px 2px 10px black;
}

.slidertitles{
    float: left;
text-align: left;
font-size:20px;
    
}

.slidertitles ul{margin-left:0px}
.slidertitles li{
    list-style: none;
    line-height: 60px;
}
.slidercontent {
    text-align:center;
    width:642px;
    margin:auto;
    height:210px;
}

.divedeeper{
    float:left;
    margin-top:18px;
    margin-left:20px;
}
.divedeeper input{margin-bottom:0px; height:16px;width:25px}
.divedeeper li {
    list-style:none;
    margin-bottom:45px;
    text-align:left;
    
}

.ui-slider .ui-slider-handle
{
    position: absolute;
    top:-7px;
    margin-left: -10px;
    z-index: 2;
    width: 24px;
    height: 24px;
    cursor: default;
    background: url(http://oniiru.com/wp-content/themes/bootstrap-child-theme-2/img/metal-slider.png)
    }
.ui-slider a {outline:none;}
.ui-slider .ui-slider-range
{
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

.ui-widget-header {background:white;}

JavaScript

var min = 0;
    var max = 100;
$("input").change(function(){
     console.log("a");
         var index = $(this).attr('class').substring(0,1);
        $("#slider_"+ index).slider('value', this.value);
        refreshSliders( index - 0 );
});
    $('.selector').slider({
        animate : true,
        min : min,    
        max : max,    
        change : function(event, ui) {
            totalvalue = $("#slider_1").slider("value") + $("#slider_2").slider("value") + $("#slider_3").slider("value");
            $('.1percent').val($("#slider_1").slider("value"));
            $('.2percent').val($("#slider_2").slider("value"));
            $('.3percent').val($("#slider_3").slider("value"));

        },    
        slide : function(event, ui) {
            $('.1percent').val($("#slider_1").slider("value"));
            $('.2percent').val($("#slider_2").slider("value"));
            $('.3percent').val($("#slider_3").slider("value"));

        }
    });

    $("#slider_1").slider('value', 20);
    $("#slider_2").slider('value', 30);
    $("#slider_3").slider('value', 50);

    $('.1percent').val($("#slider_1").slider("value"));
    $('.2cent').val($("#slider_2").slider("value"));
    $('.3percent').val($("#slider_3").slider("value"));

    function refreshSliders(slidermainin) {
        var value1 = $("#slider_1").slider("option", "value");
        var value2 = $("#slider_2").slider("option", "value");
        var value3 = $("#slider_3").slider("option", "value");
        var valuechange = (value1 + value2 + value3) - 100;
        var valuemain = 0, valueother1 = 0, valueother2 = 0;

        switch(slidermainin) {
            case 1:
                slidermain = "#slider_1";
                sliderother1 = "#slider_2";
                sliderother2 = "#slider_3";
                valuemain = value1;
                valueother1 = value2;
                valueother2 = value3;
                break;
            case 2:
                slidermain = "#slider_2";
               ...