/
slider.html
46 lines (39 loc) · 1.28 KB
/
slider.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width">
<title>Dot.</title>
<link href="../static/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/underscore.js"></script>
<script type="text/javascript" src="../lib/backbone.js"></script>
<script type="text/javascript" src="../static/dot.ui.js"></script>
<style>
.item-slider {width:auto;}
.ui-slider {float:left;}
.slider-less, .slider-more {float:left;width:32px;height:32px;}
.slider-bar {float:left;position:relative;width:120px;height:22px;background-color:#392D2C;border:5px solid #392D2C;}
.slider-point {position:absolute;left:0;top:0;width:20px;height:22px;background-color:#E7E9E1;}
</style>
</head>
<body>
<div style="margin-top:40px">
<div class="item item-slider"></div>
<br style="clear:both" />
<pre id="val"></pre>
</div>
<script type="text/javascript">
$(document).ready(function() {
window.s = new dot.UI.Slider({
target: $(".item-slider"),
max: 50,
value: 25
});
s.on("change", function(val) {
$("#val").html(val);
});
});
</script>
</body>
</html>