The Slider extender allows upgrading a text box to a graphical slider that allows the user to choose a numeric value from a finite range. The Slider’s orientation can be horizontal or vertical and it can also act as a “discrete” slider, allowing only a specified number of values within its range.

If the developer doesn’t specify any parameters, the Slider is rendered with the default layout shown in the demonstration and its range of values goes from 0 to 100. The Slider’s layout can be customized by providing CSS classes for the Slider’s rail and handle. If handle animation is enabled, the handle slides to the specified point on the rail with a nice animation effect.

When a value is chosen using the Slider, it is automatically persisted during full or partial postbacks. The developer can continue to reference the text box to get and set the Slider’s value.

Before we begin, we have included a full source code available for download, we suggest you download it and follow along with it step by step. You can download the source code below.

It is extremely easy to use Visual Studio to build a new page.

  • As always add a new WebForm to this project and name it Slider.aspx
  • Don’t forget to add a ScriptManager to the page. The ScriptManager adds AJAX functionality to our webForm.
  • For this tutorial we are going to 8 add labels 4, text boxes and add Slider extenders to the textboxes. Remember to set the target and bound control.

Below in our Code Behind file we referenced our label to update asynchronously when the slider is changed. We are recording the time and date of when it was changed and displaying it with a Label.

Now load the page in your browser and it should look something similar to this

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best 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