[How Do I:] Use the ASP.NET AJAX Slider Control?

Please install Silverlight or click download to watch video locally.

The Slider control from the ASP.NET AJAX Control Toolkit provides a simple and elegant way for the user to select a numeric value. This video shows how to add a Slider control to your Web page and how to configure its orientation, range of values, and size of increments.

Presented by Joe Stagner

Duration: 10 minutes, 32 seconds

Date: 13 March 2007

Watch    Video   |   Download    Video   |   VB Code    C# Code

Video downloads: WMV  |  Zune  |  iPod  |  PSP  |  MPEG-4  |  3GP

Audio downloads: AAC  |  WMA  |  MPEG-4  |  MPEG-3  |  MPEG-2

Comments : 8

Leave a Comment

tieuphi2006 : On June 17, 2008 5:50 AM said:

minh dang down ve nhung van de hieu thi phai can thoi gian vay?

cv_vikram : On August 06, 2008 2:45 PM said:

Very good tutorial.....thanks

djibril_chimere_DIAW : On January 23, 2009 8:06 AM said:

Thanks ! Jërëjëf!

maralbjo : On February 19, 2009 9:12 AM said:

Very good tutorial, thanks I love this stuff. However, when using a vertical slider, how can I ensure that the max value is shown on the TOP, not on the BOTTOM? Not very logical to increase a value by dragging a slider downwards, now is it?

jazz786 : On May 26, 2009 10:41 AM said:

Hi All,

My code looks like this:

.aspx

</asp:TextBox>

<ajaxToolkit:SliderExtender ID="SliderExtender1"

runat="server" TargetControlID="Slider"

RailCssClass="slider_rail" HandleCssClass="slider_handle"

HandleImageUrl="slider_custom_handle.png"

Maximum="8" Minimum="1" Steps="70" />

<asp:ImageButton ID="imgBtnStepRight" runat="server" ImageUrl="stepRight.png" OnClick="imgBtnStepRight_OnClick" />

.cs

protected void imgBtnStepLeft_OnClick(object sender, EventArgs e)

{ }

protected void imgBtnStepRight_OnClick(object sender, EventArgs e)

{ }

I want to give the user two options either to drag the handle or click on button on either sides, now all i want to do is to move the handle one step to left or right on button click.

Any suggestion? pleeeeeease

jazz786 : On May 26, 2009 10:47 AM said:

Sorry guys please ignore the above comment

Hi All,

My code looks like this:

.apsx

</asp:TextBox>

<ajaxToolkit:SliderExtender ID="SliderExtender1"

runat="server" TargetControlID="Slider"

RailCssClass="slider_rail" HandleCssClass="slider_handle"

HandleImageUrl="slider_custom_handle.png"

Maximum="8" Minimum="1" Steps="70" />

<asp:ImageButton ID="imgBtnStepRight" runat="server" ImageUrl="stepRight.png" OnClick="imgBtnStepRight_OnClick" />

.cs

protected void imgBtnStepLeft_OnClick(object sender, EventArgs e)

{ }

protected void imgBtnStepRight_OnClick(object sender, EventArgs e)

{ }

I want to give the user two options either to drag the handle or click on button on either sides, now all i want to do is to move the handle one step to left or right on button click.

Any suggestion? pleeeeeease

jazz786 : On May 26, 2009 11:01 AM said:

Hello all

again please ignore my last two messages for some reason each time i submit a comment it igoners all the text between ".apsx" and "</asp:TextBox>" and i end up supplying half the code which does not give you guys the right picture of what i am trying to do and rendering myself unhelpful. I was using Google Chorme. Anyways I will try again in IE.

Imagine this on webpage

BUTTON1_____SLIDER EXTENDER_____BUTTON2

CSS CODE

.slider_rail {

position: relative;

height: 26px;

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

}

.slider_handle {

position: absolute;

height: 26px;

width: 22px;

}

ASPX code

</asp:TextBox>

<ajaxToolkit:SliderExtender ID="SliderExtender1"

runat="server" TargetControlID="Slider"

RailCssClass="slider_rail" HandleCssClass="slider_handle"

HandleImageUrl="slider_custom_handle.png"

Maximum="8" Minimum="1" Steps="70" />

<asp:ImageButton ID="imgBtnStepRight" runat="server" ImageUrl="stepRight.png" OnClick="imgBtnStepRight_OnClick" />

CS code

protected void imgBtnStepLeft_OnClick(object sender, EventArgs e)

{ }

protected void imgBtnStepRight_OnClick(object sender, EventArgs e)

{ }

I want to give the user two options either to drag the handle or click on button on either sides, now all i want to do is to move the handle one step to left or right on button click.

Any suggestion? pleeeeeease

jazz786 : On May 26, 2009 11:07 AM said:

Hello all

IT HAS HAPPENED AGAIN. THIS WILL BE MY LAST ATTEMPT

again please ignore my last three messages for some reason each time i submit a comment it igoners all the text between ".apsx" and "</asp:TextBox>" and i end up supplying half the code which does not give you guys the right picture of what i am trying to do and rendering myself unhelpful. I was using Google Chorme. Anyways I will try again in IE.

Imagine this on webpage

BUTTON1_____SLIDER EXTENDER_____BUTTON2

CSS CODE

.slider_rail {

position: relative;

height: 26px;

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

}

.slider_handle {

position: absolute;

height: 26px;

width: 22px;

}

.aspx

asp:ImageButton ID="imgBtnStepLeft" runat="server" ImageUrl="stepLeft.png" OnClick="imgBtnStepLeft_OnClick"

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"

Maximum="8" Minimum="1" Steps="70" />

<asp:ImageButton ID="imgBtnStepRight" runat="server" ImageUrl="stepRight.png" OnClick="imgBtnStepRight_OnClick" />

CS code

protected void imgBtnStepLeft_OnClick(object sender, EventArgs e)

{ }

protected void imgBtnStepRight_OnClick(object sender, EventArgs e)

{ }

I want to give the user two options either to drag the handle or click on button on either sides, now all i want to do is to move the handle one step to left or right on button click.

Any suggestion? pleeeeeease

Leave a Comment

You must be logged in to leave a comment. Click here to log in.

Microsoft Communities