jQuery UI – Using Sliders to Create Interactivity

jQueryUI adds several forms fields that are not available in standard HTML forms. One example is slider.

By default, a slider will be horizontal with a single tab that can be used to be dragged left and right to change the value of the slider.

// create a basic slider object
$( "#slider" ).slider();

The HTML used is just a div, so it will need to send the value to a form element.

// set the value of another element based upon what the slider has been set to.
$( "#slider" ).slider({
  slide: function(event, ui) {
    $('#slideDisplay').val(ui.value);
  }
});

Watch on YouTube

Other Properties

Of course, there are numerous other properties that can be set, such as to allow vertical, multiple handles, increments, and more.

Min / Max Values

One of the most common things that needs to be set is your min, max and of course a default value. This is most commonly done upon the creation of the slider.

$( "#slider" ).slider({
  min: 100,
  max: 500,
  value: 250
});

Step Increment

A lot of people don’t know what a step is. At least not by name. A step says by how much should a movement on the slider change the value of the slider. This way you can move the slider by an increment of 10, 50, or even 100, instead of moving by one. The step value needs to be a whole number, which means you can’t choose a value of like .1.

$( "#slider" ).slider({
  min: 100,
  max: 500,
  value: 250,
  step: 50
});

Changing the Slider Look

You can use CSS to change the way a slider looks on the web page. You can see the two classes that you need to work with. All you will need to do after this is choose and change the properties that you want to change.

#slider .ui-slider-range { 
  background: #ef2929;
}
#slider .ui-slider-handle {
  border-color: #ef2929;
}

Range Slider

Sometimes you will want to have two slider handles – one for the min and one for the max value selected. This is often called a range. However, to do so you will want to use the values property. This will be an array with two values.

// Use the values property to determine the range for the sliders
// use the array to determine the min and max values
$( "#slider" ).slider({
  min: 100,
  max: 500,
  values: [ 75, 300 ],
  step: 5,
  slide: function(event, ui) {
    $('#start').val(ui.values[0]);
    $('#end').val(ui.values[1]);
  }
});

Watch on YouTube

jQuery UI – Using Sliders to Create Interactivity was originally found on Access 2 Learn