Tyoma5891,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
body{
background-color:#EEE8AA;
position: relative;
}
#slider0,#slider1{
margin:10px;
width:8px;
height:300px;
float:left;
background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
background-image:-o-linear-gradient(left,#FFD700,#FF4500);
background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
background-image:linear-gradient(to right,#FFD700,#FF4500);
}
#slider0{
margin-left: 50px;
}
.ui-slider-handle{
border-radius:50%;
position:relative;
font-size:10px;
display:block;
}
.ui-slider-vertical .ui-slider-handle{
padding-top:8px;
left:-.6em;
background-color:transparent;
border:4px solid #D2691E;
background-image:none;
margin-bottom: -1.2em;
}
:focus{
outline:0;
border:0;
}
.show0, .show1{
text-align: right;
position: absolute;
width: 30px;
bottom: 50%;
left: -40px;
}
.show1 {
left : 12px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
</head>
<body>
<div id="slider0"><div class="show0">50</div></div>
<div id="slider1"><div class="show1">50</div></div>
<script>
var sliders = $("#slider0, #slider1"), fn = function(event, ui) {
var i = sliders.index(this);
var bottom = $(ui.handle).css("bottom");
$(".show"+ i).html(ui.value).css({bottom : bottom });
i ^= 1;
$("#slider" + i).slider("option", "value", 100 - ui.value);
};
sliders.slider({
orientation: "vertical",
value: 50,
change: fn,
slide: fn
});
</script>
</body>
</html>