jquery ui slider doesn't reflect correct value?
I can't figure out what I am getting wrong in the following simple example for a jquery UI slider. Can anyone spot a problem?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider01 { margin: 10px; }
</style>
<script>
$(document).ready( function() {
var valmin = valmax = 0;
$("#slider01").slider({
min: 0,
max: 9,
slide: function (event, ui) {
$('#val01').val($(this).slider(开发者_StackOverflow中文版'value'));
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider01"></div>
<input type="text" id="val01"/>
</body>
</html>
Can anyone spot a problem?
Use the ui
var passed to your slide event.
var valmin = valmax = 0;
$("#slider01").slider({
min: 0,
max: 9,
range: true,
values: [0, 9],
slide: function(event, ui) {
$('#val01').val(ui.values[0]+', '+ui.values[1]);
}
});
http://jsfiddle.net/petersendidit/wxLez/
精彩评论