JSFiddle - React, Tailwind, and code Playground

by ccarns

HTML

<div class="divSlider">
    <input id="amount1" type="text" size="3"></input>
</div> 
<div class="divSlider">
    <input id="amount2" type="text" size="3"></input>
</div> 
<div class="divSlider">
    &nbsp;
</div> 
<div class="divSlider">
    <input id="total" type="text" size="3"></input>
</div> 
<div style="clear:both"></div>

<div class="divSlider">
<div id="slider1" class="slider"></div>
</div> 
<div class="divSlider">
<div id="slider2" class="slider"></div>
</div> 

<div class="divSlider">
<div id="slider3" class="slider"></div>
</div>

CSS

.ui-slider-vertical .ui-slider-handle{
    border-radius:0;

    background-repeat: no-repeat;
    border: 0 none;
    height: 75px;
    left: -30px;
    margin-bottom: -40px;
    margin-left: -75px;
    margin-top: 10px;
    width: 104px;
    cursor:pointer;
}
#slider1 .ui-slider-handle {
	background-image:url("http://concept34.com/projects/monchilla/images/arrow-01.jpg");
}
#slider2 .ui-slider-handle {
	background-image:url("http://concept34.com/projects/monchilla/images/arrow-02.jpg");
}
#slider3 .ui-slider-handle {
	background-image:url("http://concept34.com/projects/monchilla/images/arrow-03.jpg");
}
.divSlider{
    padding: 10px 10px 10px 130px;;
    float:left;
    width:80px;
}
.slider{
    height:300px;
    background-image:url("http://concept34.com/projects/monchilla/images/slider-range.gif");
}

.v-labelCurrent{
    color:white;
    padding:24px 10px 0 20px;
    font-size: 1.5em;
    text-decoration:none;
}

JavaScript

var openingspeed = 30;
var slider1OpeningValue = 50;
var slider3OpeningValue = 25;
var slider1Multiplier = 50;
var slider2Multiplier = 20;

$("#slider1").slider({
    max:50,min:0,step:1,value:50,orientation: "vertical",  
    slide: function(event, ui) {HandleValueSet(this, event, ui , 1)},
    change :function(event, ui) {HandleValueSet(this, event, ui , 1)} 
});

$("#slider2").slider({
    max:50,min:0,step:1,value:50,orientation: "vertical",  
    slide: function(event, ui) {HandleValueSet(this, event, ui , 2)},
    change:function(event, ui) {HandleValueSet(this, event, ui , 2)} 
});

$("#slider3").slider({
    max:50,min:0,step:1,value:50,orientation: "vertical",  
    slide: function(event, ui) {HandleValueSet(this, event, ui , 3)},
    change :function(event, ui) {HandleValueSet(this, event, ui , 3)} 
});


var val = 50;
var timer = setInterval(function() {
		if (val >= 1) {
			$("#slider2").slider("value", val);
			val -= 1;
		}
		else {
			clearInterval(timer);
		}
	}, openingspeed);


$("#slider1").slider("value", slider1OpeningValue);
$("#slider3").slider("value", slider3OpeningValue);

function HandleValueSet(thisObj, event, ui, instance) {
    if (instance == 1)   
        $("#amount1").val(ui.value * slider1Multiplier);
    if (instance == 2) 
        $("#amount2").val(ui.value * slider2Multiplier);
    
    var total = parseInt($("#amount1").val()) + parseInt($("#amount2").val());
    $("#total").val(total);
    $(thisObj).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'</div>');
}