Next »
1719/1956
« Previous

Handle Slider events: change, slide, start, stop in JavaScript

Description

The following code shows how to handle Slider events: change, slide, start, stop.

Example


<!--   ww w .  j  a v  a2s .  c  om-->

<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
//create config object
var sliderOpts = {
change: function() {
$("#messageBox").text("The slider's value has changed");
},
slide: function() {
$("#messageBox").text("The slider is sliding");
},
start: function() {
$("#messageBox").text("The slider has started");
},
stop: function() {
$("#messageBox").text("The slider has stopped");
}
};
$("#mySlider").slider(sliderOpts);
});
</script>
</head>
<body>
<div id="mySlider"></div>
<div id="messageBox"></div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Handle Slider events: change, slide, start, stop in JavaScript
Next »
« Previous