Using Ajax Slider Extender with CSS in asp.net

HI..

In this article its very interested to use an Ajax slider extender. Recently I worked with slider extender in my project...It’s very easy to use slider extender control. But when applying Css I really fed up..i goggled in many ways ..But I can’t find a correct solution..Finally one of my replied to my forum …Just I would like to share the code with you all………

Slider Extender Properties..

·         Minimum - Minimum value allowed.

·         Maximum - Maximum value allowed.

·         Decimals - Number of decimal digits for the value.

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

·         Value - Current value of the slider

·         EnableHandleAnimation - Enable/disable the handle animation.

·         HandleAnimationDuration - Duration of the handle animation, in milliseconds.

·         RailCssClass - CSS class for the slider's rail.

·         HandleCssClass - CSS class for the slider's handle.

·         HandleImageURL - URL of the image to display as the slider's handle.

·         Length - Width/height of a horizontal/vertical slider when the default layout is used.

·         BoundControlID - ID of the TextBox or Label that dynamically displays the slider's value.

·         RaiseChangeOnlyOnMouseUp - If true, fires the change event on the extended TextBox only when the left mouse button is released.

·         TooltipText - Text to display in a tooltip when the handle is hovered. The {0} placeholder in the text is replaced with the current value of the slider.

Initially we started the code with CSS…..

You can use the two type of CSS

1.For Slider Handle

2.Another one for slider rail

For this you have to use image for handle and rail slider..In Below I post the picture copy and paste in your images folder…

<style type ="text/css" >

       

       

.myclass {position:relative;

           padding-top :7px;

          width:20px;

          height:20px;

          }

         

         

.slider_rail {

    position: relative;

    height: 8px;

    width: 200px;

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

}

</style>

<div>

              

                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />

                <asp:SliderExtender ID="SliderExtender1" runat="server" TargetControlID ="textbox1" RailCssClass="slider_rail" BoundControlID ="textbox2"  Minimum="0" Maximum ="100" RaiseChangeOnlyOnMouseUp="true"   HandleCssClass ="myclass"   HandleImageUrl="~/images/han.jpg"/>

</div>

I hope this one helpful to all……