[jquery] Slider //-- // Horizontale verschuifbare balk
Ik ben op naar een horizontale balk die je kunt verschuiven en daarmee een verschillend bedrag selecteren.
Weet iemand hoe zo een ding heet?
Alvast bedankt,
Yearupie
Gewijzigd op 01/01/1970 01:00:00 door Yearupie Achternaamloos
Gesponsorde koppelingen:
http://www.extjs.com/deploy/dev/examples/slider/slider.html
http://developer.yahoo.com/yui/examples/slider/slider-ticks.html
http://www.developersnippets.com/2009/02/25/web-developers-ready-to-use-javascript-sliders-for-your-web-projects/
Genoeg keuze.
Maar dat krijg ik wel opgelost denk ik als ik weet hoe ik het value van de balk afkrijg. Hoe krijg ik dat?
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").slider({
step: 4,
value: [32],
slide: function(event, ui) { document.write(value)); }
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div style="width:250px;" id="slider"></div>
</body>
</html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").slider({
step: 4,
value: [32],
slide: function(event, ui) { document.write(value)); }
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div style="width:250px;" id="slider"></div>
</body>
</html>
Dit bedoel je denk ik?
Edit:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$('#mySliderDiv').slider({
orientation: 'vertical',
min: 0,
max: 150,
value: 50
});
orientation: 'vertical',
min: 0,
max: 150,
value: 50
});
Gewijzigd op 01/01/1970 01:00:00 door Justin S
De source staat erbij dus dat gaat wel lukken,
Bedankt voor reacties.
Gewijzigd op 01/01/1970 01:00:00 door Yearupie Achternaamloos
