Posted by: Atlas notes, on 10 Dec 2007 | View original | Bookmarked: 0 time(s)

This post helps you understanding how the slider’s layout is structured and how to change the default appearance.

Layout

The Slider Extender replaces an extended asp:TextBox control with a graphical slider, as shown in figure 1.

Figure 1. Layout of the slider

As you can see from figure 1, the slider consists of an outer div element (in red) called the rail, and an inner div element (in green) called the handle. An img element nested in the handle div is used to display the handle’s image. This results in the following DOM hierarchy:

<div>

   <div>

      <img />

   </div>

</div>

Default appearance

By default, the slider is rendered using default CSS classes for both the rail and the handle, as shown in figure 2.

Figure 2: Default appearance

The rail’s background image and the handle’s image are embedded as web resources in the AjaxControlToolkit assembly.

• A horizontal slider uses the .ajax__slider_h_handle and .ajax__slider_h_rail CSS classes for the handle and the rail, respectively.
• A vertical slider uses the .ajax__slider_v_handle and .ajax__slider_v_rail CSS classes for the handle and the rail, respectively.

Overriding the default CSS classes affects all the sliders hosted in a page.

When using the default theme, the only property that can be overridden on a per-slider basis is the slider’s length. This can be done by setting the Length property on the SliderExtender to an integer value.

At present, all the values are specified in pixels.

Now, let’s see how to customize the slider’s appearance.

Custom Appearance

In order to customize the slider’s appearance, we need to:

• Provide a CSS class for the rail
• Provide a CSS class for the handle
• Provide an image URL for the handle’s image.

Steps to perform:

1. Create a CSS class for the slider’s rail. The CSS class must contain the following attributes:

• The position attribute must be set to relative.
• Default values for height and width attributes must be provided. The width value can be overridden through the Length property of the SliderExtender.
• To embed a background image for the rail, use the background attribute.

2. Create a CSS class for the slider’s handle. The CSS class must contain the following attributes:

• The position attribute must be set to absolute.
• Values for height and width attributes must be provided.

3. Provide an image for the slider’s handle. The height and width sizes of the image must be equal to the height and width values specified in the handle’s CSS class.

4. Set the RailCssClass property of the SliderExtender instance to the name of the rail CSS class.

5. Set the HandleCssClass property of the SliderExtender instance to the name of the handle CSS class.

6. Set the HandleImageUrl property of the SliderExtender instance to the URL of the handle’s image.

Figure 3 shows a customized slider.

Figure 3: Custom appearance

The slider in figure 3 has been declared as follows:

<asp:TextBox ID="Slider" runat="server"></asp:TextBox>

<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"

    TargetControlID="Slider"

    RailCssClass="slider_rail"

    HandleCssClass="slider_handle"

    HandleImageUrl="slider_custom_handle.png"

    />

The CSS classes for the slider’s rail and handle are defined like so:

.slider_rail {

    position: relative;

    height: 15px;

    width: 200px;

    background: #FFFFFF url(slider_custom_rail.png) repeat-x;

}

.slider_handle {

    position: absolute;

    height: 14px;

    width: 22px;

}

Note that the default value of 200px set for the width attribute in the rail CSS class can be overridden through the Length property of the SliderExtender. As usual, the height and width attributes are swapped when dealing with vertical sliders.

Share this post: email it! | bookmark it! | digg it! | reddit! | kick it! | live it!

Advertisement