ASP.Net Code, DHTML Code

Use a DHTML Slider on Your ASP.Net Page

I found this great free DHTML slider, completely styled with CSS code, no images required. However, as with all XHTML objects, it is stateless. So when used in an ASP.Net application, it doesn't retain the value across postbacks, and goes back to the beginning on the slider position each time. Here's the code to store and retrieve the values.

You need to download two files to use a DHTML slider on your web page. You can find them both (a CSS and a .js file) here. They're entirely free!

Here's the code I used to implement the slider in my application:


<div class="carpe_horizontal_slider_track" style="width:60px; background-color: #A8C5E1; border-color: #A8C5E1;">
<div class="carpe_slider_slit" style="width:60px;">&nbsp;</div>
<div class="carpe_slider"
    id="SliderDistance"
    orientation="horizontal"
    distance="60"
    display="TxtDistant"
    style="left: <%=distPad %>px; background-color: #369; border-color: #69c #036 #036 #69c;">&nbsp;</div>
</div>
<div class="carpe_slider_display_holder" style="background-color: #A8C5E1; border-color: #A8C5E1; margin-right:20px;">
<input class="carpe_slider_display"
     id="TxtDistant"
     name="TxtDistant"
     type="text"
     from="5"
     to="75"
     valuecount="76"
     value="<%=dist %>"
     typelock="off"
     style="background-color: #A8C5E1; border-color: #A8C5E1;"
 />

And here's the code I used tp pick up the value from the slider, and to post it back, thus keeping the slider in the set position:


protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        dist = 15;
        distPad = 10;
    }
    else
    {
        dist = Convert.ToInt16(Request.Form["TxtDistant"]);
        distPad = dist - (int)((dist*.11) + 5);
        // you may need to adjust this formula if you change the length of your slider track.
    }
}

Enjoy! Now you can create a user-friendly interface with a draggable slider in your ASP.net application!

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image