Databinding the Slider Control

Databinding the Slider Control

Christian Wenz

Overview

The Slider control in the AJAX Control Toolkit provides a graphical slider that can be controlled using the mouse. It is possible to bind the current position of the slider to another ASP.NET control.

Steps

In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element):

Next, add two TextBox controls to the page. One will be transformed into a graphical slider, and the other one will hold the position of the slider.

The next step is already the final step. The SliderExtender control from the ASP.NET AJAX Control Toolkit makes a slider out of the first text box and automatically updates the second text box when the slider position changes. In order for that to work, The SliderExtender’s TargetControlID attribute must be set to the ID of the first text box; the BoundControlID attribute must be set to the ID of the second text box.

As you can see in the browser, the data binding works in both directions: entering a new value in the text box updates the slider’s position. If you make the second text box read only, you may add a weak protection to the text field so that it is harder for the user to manually update the value in there.

Slider and text box are in sync (Click to view full-size image)

Next Tutorial