The Ajax Control Toolkit includes a “Slider” and a “MultiHandleSlider” control extender that lets your user fill a textbox with a numeric value by dragging one or more markers along a line or “axis”.

One “slider” means manipulating one value, multiple sliders means manipulating multiple values.

This is another way to add a visual component to data entry, which may be faster, or lead to greater accuracy and convenience when data is being entered.

I’m replacing the Ajax Control Toolkit slider with the jQuery UI Slider.

Here is a screen shot of the working sample.

And here is our page markup :


[sourcecode language=”html”]
<%@ Page Title=’Home Page’ Language=’C#’ MasterPageFile=’~/Site.master’
AutoEventWireup=’true’ CodeFile=’Default.aspx.cs’ Inherits=’_Default’ %>

<asp:Content ID=’HeaderContent’ runat=’server’
ContentPlaceHolderID=’HeadContent’>
<link href=’Content/themes/base/jquery.ui.all.css’ rel=’stylesheet’
type=’text/css’ />
<script src=’Scripts/jquery-1.4.4.js’ type=’text/javascript’></script>
<script src=’Scripts/jquery-ui-1.8.13.js’ type=’text/javascript’></script>
<style>
.valueout
{
border: 0;
color:#f6931f;
font-weight:bold;
}
</style>
<script type=’text/javascript’>
$(function () {
// Add one slider to the first target DIV.
$(‘#slider’).slider({
value: 100,
min: 0,
max: 500,
step: 50,
slide: function (event, ui) {
$(‘#amount’).val(‘$’ + ui.value);
}
});
$(‘#amount’).val(‘$’ + $(‘#slider’).slider(‘value’));

// Add two sliders to the second target DIV.
$(‘#slider-range’).slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$(‘#amountrange’).val(‘$’ + ui.values[0]
+ ‘ – $’ + ui.values[1]);
}
});
$(‘#amountrange’).val(‘$’ + $(‘#slider-range’).slider(‘values’, 0) +
‘ – $’ + $(‘#slider-range’).slider(‘values’, 1));

});
</script>

</asp:Content>
<asp:Content ID=’BodyContent’ runat=’server’
ContentPlaceHolderID=’MainContent’>
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit
<a href=’http://www.asp.net’ title=’ASP.NET Website’>www.asp.net</a>.
</p>
<hr />

<label for=’amount’>Donation amount ($50 increments):</label><br /><br />
<asp:TextBox ID=’amount’ CssClass=’valueout’ runat=’server’
ClientIDMode=’Static’>
</asp:TextBox>
<br /><br />
<div id=’slider’ style=’width: 300px;’></div><br />

<hr />
<asp:Button ID=’Button1′ runat=’server’ Text=’Submit’
onclick=’Button1_Click’ />
<br /><br />
<asp:Label ID=’LabelTestResult’ runat=’server’ Text=”></asp:Label>
<hr />

<label for=’amountrange’>Range:</label>
<asp:TextBox ID=’amountrange’ CssClass=’valueout’ runat=’server’
ClientIDMode=’Static’>
</asp:TextBox><br /><br />
<div id=’slider-range’ style=’width: 300px;’></div>

</asp:Content>
[/sourcecode]


The actual value is a string stored in the textboxes created on lines #58 and #71.

Note the setting of the initial value, min, max, step, and range parameters.

Note also lines #28 and #40 where slider value is used to set our textboxes.

Since those text boxes are ASP.NET Server Side controls we can easily access them in our code-behind.


[sourcecode language=”csharp”]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
LabelTestResult.Text = ‘Thanks – ‘ + amount.Text
+ ‘ is a lot of money!’;
}
}

[/sourcecode]


You can download a working sample [ HERE ]