Fixed Range Slider

Sometimes, you may have a requirement to let users select values within a fixed range only. For eg. the slider may display values from 0-50, however you may want the user to select a range of values whose difference is always less than or equal to 10 (or any other value of your choice). This can be accomplished with ease using the wijslider widget and its stop, change and buttonMouseDown events.

Declaring wijslider

You can declare the wijslider with its options in the following way :

<div id="slider"></div>  

$("#slider").wijslider({  
   orientation: "horizontal",  
   min: 0,  
   max: 50,  
   range: true,  
   step: 1,  
   values: [5, 15]  
});

Creating a Fixed Range Slider

The next step is to prevent users from selecting values whose difference is more than 10. For this, we will handle the stop and change events. We will use the change event to store the values of wijslider and the stop event to check if the difference in the values is more than 10. If it is, then reassign the old value to the thumb that broke the rule.

stop: function (event, ui) {  
   restoreOldValues();  
},  
change: function (event, ui) {  
   if (flag) {  
      restoreOldValues();  
   }  
   else {  
      oldvalues = $(this).wijslider("values");  
      value1 = oldvalues[0];  
      value2 = oldvalues[1];  
   }  
},  

buttonMouseDown: function (e, args) {  
   flag = true;  
}  

function restoreOldValues() {  
   var values = $("#slider").wijslider("values");  
   slider1 = values[0];  
   slider2 = values[1];  
   if ((slider2 - slider1) > 10) {  
      if (value1 != undefined && value2 != undefined) {  
         if (slider1 != value1) {  
            $("#slider").wijslider("values", 0, value1);  
         }  
         else if (slider2 != value2) {  
            $("#slider").wijslider("values", 1, value2);  
         }  
      }  
   }  
   flag = false;  
}

Thats it!!! Now, you have a slider that would allow users to select values within a fixed range only using the wijslider widget You can download the sample given below for reference. Download Sample