есть у кого-то какие-то мысли?
уточню, мой вопрос относился как продолжение к примеру
рони, этому:
<!DOCTYPE html>
02
<html lang="en">
03
<head>
04
<meta charset="utf-8">
05
<title>slider demo</title>
06
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
07
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
08
<style type="text/css">
09
body{
10
background-color:#EEE8AA;
11
}
12
13
#slider0,#slider1{
14
margin:10px;
15
width:8px;
16
height:300px;
17
float:left;
18
background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
19
background-image:-o-linear-gradient(left,#FFD700,#FF4500);
20
background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
21
background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
22
background-image:linear-gradient(to right,#FFD700,#FF4500);
23
}
24
25
.ui-slider-handle{
26
border-radius:50%;
27
position:relative;
28
font-size:10px;
29
display:block;
30
}
31
32
.ui-slider-vertical .ui-slider-handle{
33
padding-top:8px;
34
left:-.6em;
35
background-color:transparent;
36
border:4px solid #D2691E;
37
background-image:none;
38
margin-bottom: -1.2em;
39
}
40
41
:focus{
42
outline:0;
43
border:0;
44
}
45
</style>
46
47
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
48
</script>
49
</head>
50
<body>
51
<div id="slider0"></div>
52
<div id="slider1"></div>
53
<script>
54
var sliders = $("#slider0, #slider1");
55
sliders.slider({
56
orientation: "vertical",
57
value: 50,
58
slide: function(event, ui) {
59
var i = sliders.index(this);
60
i ^= 1;
61
$("#slider" + i).slider("option", "value", 100 - ui.value)
62
}
63
});
64
</script>
65
</body>
66
</html>