In this post Asp.Net jQuery UI Slider Event handlers we
shall see how to handle the events which are triggered by the slider control.
Add DIV tag to the page
and add the below jQuery script.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> jQuery UI Slider</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
var startPosition;
var startPosition;
$(function() {
//
// Slider
Events (Start, Slide, Stop)
$("#divSliderEvents").slider({
start: function(event, ui)
{
startPosition = ui.value;
//alert('Slider started at: ' + ui.value);
},
slide: function(event, ui) {
$('#txtSliderEvents').val(ui.value);
},
stop: function(event, ui)
{
alert('Slider Start Position: ' +
startPosition);
alert('Slider
End Position: ' + ui.value);
}
});
$('#txtSliderEvents').val($('#divSliderEvents').slider('value'));
});
</script>
</head>
<body>
<form id="frmSlider" runat="server">
<table>
<tr>
<td>Slider Events</td>
<td><asp:TextBox
id="txtSliderEvents"
runat="server"></asp:TextBox>
</td>
<td><div
id="divSliderEvents"
style="width:100px;"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
For a full
example covering all possible scenarios in using a jQuery UI Slider control
refer to the post Asp.net jQuery UI Slider Tutorial
Related Posts
Asp.net jQuery UI Slider with two handles
No comments:
Post a Comment