This tutorial will demonstrate how to use the Slider Control in an ASP.NET 4.0 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 2010. File > New > Web Site > ASP.NET Web Site and name it AJAXSliderCntrl or whatever you want.

Open the default.apsx page and navigate to the AJAX Extensions tab and double-click ScriptManger.
Then below that add two TextBox’s name them (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:

Let’s add some more advanced functions.

To begin, grab two more TextBox’s and name them “Slider2” and “Slider2_BoundControl”.

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

Below the Slider2_BoundControl add an UpdatePanel control.

Then add a ContentTemplate within the UpdatePanel.

Then add a Trigger’s collection as well with an 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 a standard

Next, add the second

Now remember that we set up the UpdatePanel and specified that the slider control trigger’s to the EventName=”TextChanged”, Remember to set the Autopostback to true.

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.

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

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.

Download Source Files