-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
79 lines (79 loc) · 3.48 KB
/
demo.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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/slider/">
<title>Sliders</title>
<style type="text/css">
.wrapper {position: relative;}
.slider {background: #FB7700;clear: both;display: block;height: 4px;margin: 100px 20%;overflow: visible;position: relative;width: 60%;}
.slider .range {background: transparent;border-top: 4px solid #5889E1;bottom: 0;display: block;left: 0;position: absolute;right: 0;top: 0;}
.slider .info {background: none repeat scroll 0 0 rgba(0, 0, 0, 0);display: block;height: 20px;left: 0;position: absolute;top: -20px;width: 120px;}
.slider a {border-bottom: 25px solid #888888;border-left: 0 solid transparent;border-right: 15px solid transparent;display: block;height: 0;opacity:.7;position: absolute;top: 4px;width: 0;}
.slider .label {display: block;color: #333;position: relative;}
.slider.vertical {clear: none;float: left;height: 250px;margin: 100px 50px;width: 4px;}
.slider.vertical .range {border-left: 4px solid #5889E1;border-top: 0 none;}
.slider.vertical a {border-bottom: 15px solid transparent;border-right: 20px solid #888888;border-top: 0 solid transparent;clear: none;height: 0;left: 4px;width: 0;}
</style>
</head>
<body>
<div class="wrapper">
<div class="slider">
<div class="info"></div>
<div class="range"></div>
<a href="javascript:void(0);" class="slide"></a>
<input type="hidden" name="slide-1">
</div>
<div class="slider">
<div class="info"></div>
<div class="range"></div>
<a href="javascript:void(0);" class="slide"></a>
<input type="hidden" name="slide-2" value="60">
</div>
<div class="slider">
<div class="info"></div>
<div class="range"></div>
<a href="javascript:void(0);" class="slide"></a>
<input type="hidden" name="slide-3" value="45">
</div>
<div class="slider vertical">
<div class="info"></div>
<div class="range"></div>
<a href="javascript:void(0);" class="slide"></a>
<input type="hidden" name="slide-4" value="29">
</div>
<div class="slider vertical">
<div class="info"></div>
<div class="range"></div>
<a href="javascript:void(0);" class="slide"></a>
<input type="hidden" name="slide-5">
</div>
<div class="slider vertical">
<div class="info"></div>
<div class="range"></div>
<a href="javascript:void(0);" class="slide"></a>
<input type="hidden" name="slide-6" value="50">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slider.v2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider').simpleSlider({
interval: {
min: 18,
max: 80
},
limits: {
min: 24
},
slide: function (container, value, percent, offset) {
$('.info', container).text(value + ' anni');
$('.range', container).offset(offset);
$('input', container).val(value);
}
});
});
</script>
</body>
</html>