Learn How to Use the ASP.NET AJAX Slider Control C#

This tutorial will demonstrate how to use the Slider Control in an ASP.NET 3.5 AJAX C#

In this tutorial we will show you how to simplify numeric user input by using an AJAX control called the Slider control.

Here is a snapshot of the Web site:

To start, open Visual Studio 2008. File > New > Web Site > ASP.NET Web Site and name it AJAXSliderCntrl or whatever you want.

Need help with Windows Dedicated Hosting? Try Server Intellect I'm a happy customer!

Open the default.apsx page and add navigate to the AJAX Extensions tab and double-click ScriptManger. Then below that add two TextBox’s (Slider1, Slider1_BoundControl). The first TextBox ‘Slider1” will actually be the slider control. Then we want to configure a bound control ‘Slider1_BoundControl’ that will be the recipient of numeric value that is selected by the user by moving the slider to different values.

Now navigate to the AJAX Library tab within the AJAX Toolkit that you can download here and add a SliderExtender. Now we can program the specific attributes that will be necessary to implement the slider control with the behavior you want.

First specify the TargetControlID=”Slider1”, because we specified the first TextBox the same name. Next specify the BoundControlID=”Slider1_BoundControl” because that is what we specified the second textbox. Now we want it to appear horizontally, so specify the orientation=”horizontal”. Finally, set EnableHandleAnimation = “true”. Here is the markup for the SliderExtender:

It should look similar to this:

If you're ever in the market for some great Windows web hosting, try Server Intellect.We have been very pleased with their services and most importantly, technical support.

Next, let’s add some more advanced implementation. To begin, grab two more TextBox’s and name them “Slider2” and “Slider2_BoundControl”.

For Slider2, set Text=”0” and add AutoPostback=”true”, because whenever the value changes we want to sutomatically do a postback.

Below the Slider2_BoundControl add an UpdatePanel control. Then add a ContentTemplate awithin the UpdatePanel. Then add a Trigger’s collection as well with an <asp:ASyncpostBackTrigger> with a ControlId=”Slider2” and add an EventName=”TextChanged”. Remember that the SliderControlExtender extends a TextBox; so when the value of that control changes, since the base object for this control is a TextBox the value is changed.

Next let’s add to the ContentTemplate add a standard <asp:Label and call it lblUpdateDate that will contain the updated time and date.

Next, add the second <ajaxControlExtender for the slider. You can just add the same attributes as for the slider control before. Make sure you change all the names to the correct corresponding values. Except this time change the Orientation attributes to “Vertical” and add a Minimum value to”-99” and a maximum value to “99”.

Now remember that we set up and UpdatePanel and specified that the slider control trigger’s the EventName=”TextChanged” we want to do a postback. In our Slider2 control we set AutoPostBack=”true”. We want to update the text value within the label every time the value for the Slider2 changes.

In order to achieve this functionality we need to generate a Page_Load event for our page. This will be triggered when the AutoPostBack happens. Enter some logic such as:

This code block above populates the lblUpdateDate with the current time. Then RegisterAsyncPostBackControl registers Slider2.

Save and Run.

We moved our Web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.