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;
}
#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);
}
.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;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
</head>
<body>
<div id="slider0"></div>
<div id="slider1"></div>
<script>
var sliders = $("#slider0, #slider1");
sliders.slider({
orientation: "vertical",
value: 50,
slide: function(event, ui) {
var i = sliders.index(this);
i ^= 1;
$("#slider" + i).slider("option", "value", 100 - ui.value)
}
});
</script>
</body>
</html>