JSFiddle - React, Tailwind, and code Playground

HTML

<div class="conteneur">
    <p id="p1">info1</p>
    <div id="slider_caya" class="selector inactive"></div>
    <div style="clear:both"></div>
    <p id="p2">info2</p>
    <div id="slider_charity" class="selector inactive"></div>
    <div style="clear:both"></div>
    <p id="p3">info3</p>
    <div id="slider_artists" class="selector inactive"></div>
    <div style="clear:both"></div>
    <p id="p5">totalvalue: 00</p>
</div>

CSS

body
{
    background: #1C1C1C;
    color:white;
}
.conteneur
{
    width: 400px;
    margin: auto;
    margin-top: 100px;
}
#p1,
#p2,
#p3
{
    width: 50px;
    float: left;
    margin-right: 40px;
    padding-top: 4px;
}
.ui-slider
{
    float: left;
    position: relative;
    width: 200px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    margin: 20px;
    border-radius: 1000px;
}
.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    cursor: default;
    background: #356123;
    margin-left: -10px;

    box-shadow: 0 0 8px black;
    -webkit-box-shadow: 0 0 8px black;
    -moz-box-shadow: 0 0 8px black;
    -o-box-shadow: 0 0 8px black;
    -ms-box-shadow: 0 0 8px black;
    border-radius: 1000px;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    -o-border-radius: 1000px;
    -ms-border-radius: 1000px;
}
.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;
}

JavaScript

var min=0;
    var max=100;

    $('.selector').slider(
        { animate: true },
        { min: min },
        { max: max },
        {change: function(event, ui) {
            totalvalue = $("#slider_caya").slider("value")+$("#slider_charity").slider("value")+$("#slider_artists").slider("value");
            $('#p1').text($("#slider_caya").slider("value"));
            $('#p2').text($("#slider_charity").slider("value"));
            $('#p3').text($("#slider_artists").slider("value"));
            $('#p5').text('totalvalue: '+totalvalue);
        }},
        {slide: function(event, ui) {
            $('#p1').text($("#slider_caya").slider("value"));
            $('#p2').text($("#slider_charity").slider("value"));
            $('#p3').text($("#slider_artists").slider("value"));
            $('#p5').text('totalvalue: '+totalvalue);
        }}
    );

    $("#slider_caya").slider('value', 20);
    $("#slider_charity").slider('value', 30);
    $("#slider_artists").slider('value', 50);

    $('#p1').text($("#slider_caya").slider("value"));
    $('#p2').text($("#slider_charity").slider("value"));
    $('#p3').text($("#slider_artists").slider("value"));

    function refreshSliders(slidermainin) {
        var valuecaya = $("#slider_caya").slider("option", "value");
        var valuecharity = $("#slider_charity").slider("option", "value");
        var valueartists = $("#slider_artists").slider("option", "value");
        var valuechange = (valuecaya + valuecharity + valueartists) - 100;
        var valuemain=0,valueother1=0,valueother2=0;

        if(slidermainin==1)
        {
            slidermain="#slider_caya";
            sliderother1="#slider_charity";
            sliderother2="#slider_artists";
            valuemain=valuecaya;
            valueother1=valuecharity;
            valueother2=valueartists;
        }
        else if(slidermainin==2)
        {
            slidermain="#slider_charity";
            sliderother1="#slider_caya";
           ...