Getting Started Overview

The following tutorial demonstrates using RadSlider to interact with the month of a Standard ASP.NET Calendar control. The tutorial shows how to set minimum and maximum values, change the current slider value, respond to value changes and set the skin.

1. In the default page of a new ASP.NET AJAX-enabled Web Application add a Standard Calendar control and a RadSlider.

2. In the Properties Window for the Calendar control set the PrevMonthText and NextMonthText properties to blank ("").

3. Open the RadSlider Smart Tag and select "Office2007" from the Skin drop down list.

4. In the Properties Window for the RadSlider set the following properties:

   • AutoPostBack = True
   • MinimumValue = 1
   • MaximumValue = 12

5. In the Properties Window, click the Events button (). Double-click the ValueChanged event to create an event handler. Replace the event handler with the code below.

   C#

   protected void RadSlider1_ValueChanged(object sender, EventArgs e)
   {
       Calendar1.VisibleDate = new DateTime(DateTime.Today.Year, (int)RadSlider1.Value, 1);
   } 
   

   VB

   Protected Sub RadSlider1_ValueChanged(ByVal sender As Object, ByVal e As EventArgs)
       Calendar1.VisibleDate = New DateTime(DateTime.Today.Year, DirectCast(RadSlider1.Value, Integer), 1)
   End Sub
   

6. Replace the Page_Load event handler with the code below:

   C#

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           RadSlider1.Value = Calendar1.VisibleDate.Month;
       }
   } 
   

   VB

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
       If Not IsPostBack Then
           RadSlider1.Value = Calendar1.VisibleDate.Month
       End If
   End Sub
   

7. Press F5 to run the application. Drag the slider and observe the change to the Calendar. Notice that you can't drag the slider outside the minimum and maximum values of 1..12.

See Also

• Design Time

• Events