Mobile slider mouseup problem
I would like to use the mobile slider and do something with the value when the user ended the slide movement. I can get it working with the "change" function but then it gives me all the values during the movement of the slider. I need to do something with the value only once.
Does anyone have an idea?
- <!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a4.css" />
<script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
/*
// this works
$('#slider-1').change(function(){
console.log($(this).val());
})
*/
// this does not work
$('#slider-1').bind('mouseup', function() {
console.log($(this).val());
});
});
// --></script>
</head>
<body>
<div data-role="page">
<div id="sliders">
<div class="slidename">slider 1</div>
<div><input type="range" name="slider-1" id="slider-1" value="100" min="0" max="100" /></div>
</div>
</div>
</body>
</html>