The jQuery UI library provides
a useful Slider control which can be plugged in into out forms, the jQuery UI Slider
can be used to collect numeric inputs from the user like age, count etc and
range values like zip code range
In the following example
I have tried to cover all the possible scenarios which we come across while
using a Slider control.
Running
the sample
To run the sample at your desk, create a new Asp.net page; copy the entire code below, change reference of the jQuery & jQuery UI files to point to your local directory. Build and run the application, slide through each of the slider controls to see their behavior.
Code:
<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;
$(function()
{
// Simple
Slider
$("#divSimpleSlider").slider();
//
// Get
Slider value
$("#divSliderGetValue").slider({
slide: function(event,
ui) {
$('#txtSliderGetValue').val(ui.value);
}
});
$('#txtSliderGetValue').val($('#divSliderGetValue').slider('value'));
//
// Set
Slider Value
//
Initialize Silder
$("#divSliderSetValue").slider();
// Set
Slider Value on Click of Button
$('#cmdSet').click(function(event) {
event.preventDefault();
$('#divSliderSetValue').slider("option", "value",
25);
});
//
// Slider
Range
$("#divSliderRange").slider({
min: 0,
max: 200,
slide: function(event,
ui) {
$('#txtSliderRange').val(ui.value);
}
});
$('#txtSliderRange').val($('#divSliderRange').slider('value'));
//
// 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'));
//
// Slider
Step
$("#divSliderStep").slider({
step: 5,
slide: function(event,
ui)
{
$('#txtSliderStep').val(ui.value);
}
});
$('#txtSliderStep').val($('#divSliderStep').slider('value'));
//
// Slider
Step
$("#divSlider2Handlers").slider({
range: true,
values: [0,100],
slide: function(event,
ui) {
$('#txtSlider2Handlers').val(ui.values[0]
+ ' - ' + ui.values[1]);
}
});
$('#txtSlider2Handlers').val($('#divSlider2Handlers').slider('values', 0) + ' - '
+ $('#divSlider2Handlers').slider('values', 1));
});
</script>
</head>
<body>
<form id="frmSlider" runat="server">
<table width="400">
<tr>
<td>Simple
Slider</td>
<td><div id="divSimpleSlider"
style="width:100px;"></div>
</td>
</tr>
<tr>
<td>Slider
GetValue</td>
<td><asp:TextBox
id="txtSliderGetValue"
runat="server"></asp:TextBox>
</td>
<td>
<div id="divSliderGetValue"
style="width:100px;"></div>
</td>
</tr>
<tr>
<td>Slider
SetValue</td>
<td><div id="divSliderSetValue"
style="width:100px;"></div>
</td>
<td>
<input type= "button" ID="cmdSet" Value="Set" />
</td>
</tr>
<tr>
<td>Slider
Range</td>
<td><asp:TextBox
id="txtSliderRange"
runat="server"></asp:TextBox>
</td>
<td><div id="divSliderRange"
style="width:100px;"></div>
</td>
</tr>
<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>
<tr>
<td>Slider
Step (5)</td>
<td><asp:TextBox
id="txtSliderStep"
runat="server"></asp:TextBox>
</td>
<td><div id="divSliderStep"
style="width:100px;"></div>
</td>
</tr>
<tr>
<td>Slider 2
Handlers</td>
<td><asp:TextBox
id="txtSlider2Handlers"
runat="server"></asp:TextBox>
</td>
<td><div id="divSlider2Handlers"
style="width:100px;"></div>
</td>
</tr>
<tr>
<td colspan="2"><asp:Button
id="cmdSave"
runat="server"
Text="Save"
onclick="cmdSave_Click"></asp:Button>
</td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment