Learning jQuery

jQuery UI provides slider widget which can be used for inputs where range is defined or fixed like we have in various color pickers for RGB. The biggest advantage of slider is that you are not concerned about the validation of the input value as range is fixed and user can't input value beyond the range. In this post, I will show you how can you use slider widget with asp.net application.

First of all, we need to place a div control and we will bind the slider to the div. And place a label which will be used to show the current value of slider control.

<div id="slider"></div>
<asp:Label ID="lbl" runat="server"></asp:Label>

Now, to implement slider control we need to provide reference of jQuery.ui js file which can be downloaded from here. Always use the compressed version of jQuery reference files for production release. Why? Read here.

Or you can also provide reference from the microsoft CDN. Why from CDN? Read this post for the advantage of loading jQuery from CDNs.

below jQuery code will bind the slider control to the div.

$(document).ready(function(){
  $("#slider").slider();
});

Now, when you run this page then you will see a long slider on page with no range. As we have not specified any range.slider control comes with various options/properties which can be set. Here are few of them.
1. min : Minimum value allowed for the slider.
2. max : Maximum allowed value for the slider.
3. step : How much you want to increment when you slide. Default is 1.
4. value : set default value of the slider.

So now, let build our slider using these options.

$(document).ready(function(){
  $("#slider").slider(
  {
   min:0,
   max:250
  }
});

So now we have set the minimum and maximum range allowed for the slider. Run your page. Oops no difference. You don't see any range. Well, here is the biggest disadvantage of slider widget that you have to use another control to show slider's current value. Rememeber, we have placed a label to show slider value. slider widget has slide function() which gets executed when we slide the slider. We will use this method and bind the current value of slider to the label.

$(document).ready(function(){
  $("#slider").slider(
  {
    min:0,
    max:250,
    slide:function(event,ui) 
    {
      $("#lbl").text(ui.value);
    }
  });
});

Now run the page and slide. You will see the slider's current value in the label. Also it can't go beyond the 250. As you see it is incrementing the value by 1 as step options default value is 1. If you want to increment by 5 then you can override this value.

$(document).ready(function(){
  $("#slider").slider(
  {
    min:0,
    max:250,
    step:5,
    slide:function(event,ui) 
    {
      $("#lbl").text(ui.value);
    }
  });
});

You can also set the default value of the slider using value option. By default it will always starts from the min specified value. You can override the value property. Also define the width of the div to control the slider's width.

jQuery slider widget is easy to implement and really looks nice on the page.Hope you find this post useful.

Feel free to contact me for any help related to jQuery. I will gladly help you.