Using Ajax Multihandleslider extender with css

Hi..

In previous article I explained about how to use slider extender with CSS..For your refrence I below mention the link..

http://vbdotnetaddict.blogspot.com/2011/10/using-ajax-slider-extender-with-css-in.html

Now in this article we have seen about ..How to use multihandleslider extender with css..its very intresting and easy to use multihandle extender..Its mainly used to select a between particlular range..

Properties:

Minimum - Minimum value allowed.

Maximum - Maximum value allowed.

Steps - Number of discrete values inside the slider's range.

ShowHandleHoverStyle - Whether to display an alternate CSS style when the user is hovering over a handle.

ShowHandleDragStyle - Whether to display an alternate CSS style when the user is dragging a handle.

MultiHandleSliderTargets - An inner property describing each handle on the slider.

·         ControlID - The TextBox or Label whose value is bound to this handle.

·         HandleCssClass - For sliders with custom styling; the CSS class used to style the handle.

·         HandleHoverCssClass - For sliders with custom styling and hover effects; the CSS class used when the user is hovering over the handle.

·         HandleDragCssClass - For sliders with custom styling and drag effects; the CSS class used when the user is dragging the handle.

·         DecimalPlaces - The number of decimal places to format the bound control's value.

·         Offset - For sliders with custom styling and inner rails; sets the pixel offset where the inner rail begins, for handles that use transparency.

Use the below images for applying css..Copy the below images and create one folder name of images and paste it

Intially apply the css for multihandle extender…..

<style type="text/css">

.ajax__multi_slider_custom .handle-x-left

        {

            position: absolute;

            background: url('images/point.png') no-repeat;

            width: 15px;

            height: 25px;

            z-index: 200;

            cursor: w-resize;

        }

        .ajax__multi_slider_custom .handle-x-right

        {

            position: absolute;

            background: url('images/point.png') no-repeat;

            width: 15px;

            height: 22px;

            z-index: 200;

            cursor: w-resize;

        }

        .ajax__multi_slider_custom

        {

            position: relative;

            background: url('images/r.gif') repeat-x;

            width: 170px;

            height: 25px;

            z-index: 100;

        }

    </style>

Drag the multihandle slider extender from ajaxcontrol tool kit….apply CSS should be like this…

<div>

        <cc1:MacroWebTextBox ID="txtfrom" runat="server" Width="70" Text="0"></cc1:MacroWebTextBox>

        <cc1:MacroWebTextBox ID="txtto" runat="server" Width="70" Text="2000000"></cc1:MacroWebTextBox>

        <asp:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server" BehaviorID="multiHandleSliderExtenderTwo"

            ShowInnerRail="true" HandleAnimationDuration="0.1" TooltipText="{0}" TargetControlID="slider"

            CssClass="ajax__multi_slider_custom" RaiseChangeOnlyOnMouseUp="true" Minimum="0"

            Maximum="2000000">

            <MultiHandleSliderTargets>

                <asp:MultiHandleSliderTarget ControlID="txtfrom" HandleCssClass="handle-x-left" />

                <asp:MultiHandleSliderTarget ControlID="txtto" HandleCssClass="handle-x-right" />

            </MultiHandleSliderTargets>

        </asp:MultiHandleSliderExtender>

        <cc1:MacroWebTextBox ID="slider" runat="server"></cc1:MacroWebTextBox>

    </div>

I hope this one will be useful to all…..