JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slidercontent">
<div class="slidertitles">
    <ul>
        <li>1:</li>
        <li>2:</li>
        <li>3:</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 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>
<!--    <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 : false,    
        min : min,    
        max : max,    
        change :  function (event, ui){
          refreshSliders(this, ui);
        },
        slide :  function (event, ui){
          refreshSliders(this, ui);
        }
    });
$("#slider_1").slider('value', 10);
$('.1percent').val($("#slider_1").slider("value"));

function refreshSliders(thisSlider, ui){    
    var sliderNum = $(thisSlider).attr("id").replace("slider_", "");
    var otherNum = (sliderNum==1)?2:1;  
    $('.'+sliderNum+'percent').val(ui.value);
    if ($("#slider_"+otherNum).slider("value")!=max-ui.value){             
          $("#slider_"+otherNum).slider("value", max-ui.value);
          $('.'+otherNum+'percent').val(max-ui.value); 
     }    
}