In a web application world, a slider is a UI component, which helps application users choose value of a variable by sliding the knob like component, which is displayed on the page. Adding a slider component gives user a rich user experience.

In previous post, we learned about how to create a date-picker using JQuery UI date-picker plugin. In this article, we will learn about how to use JQuery UI slider on HTML or JSP. We will also learn about different useful options, methods available with the JQuery UI slider.

Following are the steps to create slider using JQuery UI.

  • Create a HTML page and import required JQuery UI plugin and CSS files.
  • Add the required HTML element snippet to the created page.
  • Add the required java script to enable the slider.

Create a HTML page and import required JQuery UI plugin and CSS files

First step to implement the slider is importing required java script libraries to our HTML/ JSP page. We need to import JQuery and JQuery UI plugin libraries and JQuery UI CSS file to our page. This can be achieved by using the tag and CSS files using tag as shown below. Add the following code snippet to the part of the page.

< link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
< script src=https://code.jquery.com/jquery-1.12.4.js></script>
< script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Add the required HTML element snippet to the created page

In previous step, we imported required java script and CSS libraries. Now we need to add a HTML snippet, which contains a simple < div> element, which is used as slider component as shown below.

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

Add the required java script to enable the slider

Now it’s time for real action. Add the following java script snippet to the page to enable the JQuery UI slider. This is the script required for initializing the slider component on our page.

< script>  
$( function() {
    $( "#slider" ).slider();
  } );
< /script>

JQuery UI slider offers different methods, options and events. Few of them are listed below.

Options

  • animate : This can be used to set the pace of the slider handle, with which the slider handle moves on the slider track. This option accepts Boolean value, string value like “slow” or “fast” or a number value, a duration in milliseconds. Ex: $( “#slider” ).slider({ animate: 1000 });
  • disabled : Setting the value to “true” makes the slider disabled.
  • max : Initializes maximum value of the slider. Ex: $( “#slider” ).slider({ max : 1000 });
  • min : Sets the minimum value of the slider. Ex: $( “#slider” ).slider({ min : 200 });
  • orientation : This option can be used to set orientation of the slider with either “vertical” or “horizontal”. Ex : $( “#slider” ).slider({ orientation : “vertical” });
  • range : To set whether the slider represents a range of values. Ex : $( “#slider” ).slider({ range: “true” });
  • step :  Determines the minimum step value intervals slider handle takes while moving between min and max values. Ex: $( “#slider” ).slider({ step: 10 });
  • value : This option can be used to set value of the handle. It can be used to set value of first handle in case of range option is used. accepts number as parameter value.
  • values : This option can be used to set values for range handles if range value is set to ‘true‘. This option accepts arry of numbers with two values. Ex: $( “#slider” ).slider({ values : [10, 20] });

Methods :

  • destroy : This method removes the slider element from the page. Ex: $(‘#slider’).slider(“destroy”);
  • disable : This method can be used to disable the slider. Ex: $(‘#slider’).slider(“disable”);
  • enable : This method can be used to enable the slider component. Ex: $(‘#slider’).slider(“enable”);
  • option : This method can be used to set slider options.
  • value : This method can be used to get/set the slider value. Ex: $( “.selector” ).slider( “value” );
  • values : This method is used to get/set values of both handles while using range option. We can also get/set value of individual handles using index(0 or 1).

Events : 

  • change (event, ui) : This is triggered whenever there is a change in slider value.
  • create (event, ui) : This event is triggered whenever a slider component is created.
  • slide (event, ui) : This event is triggered whenever there is a slide of a handle. Value of current handle can be retrieved by using ui.value. We can retrieve array values by using ui.values.
  • start (event, ui) : This event is triggered when user starts slidinh the handle of the slider. We can get the current handle(handle), handle Index(handleIndex) and value(value) using corresponding ui object parameters.

For complete documentation, visit official website.

An example JQuery UI slider with range

< html>
< head>
< link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
< script src="https://code.jquery.com/jquery-1.12.4.js"></script>
< script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
< body>
< div style="width : 25%;">
< div id="slider"></div>
</div> 
< div id="values"></div>
< br/>< br/>
< h4 id="selectedrange"></h4>
< script>
$( function() {
$( "#slider" ).slider({
min : 50,
max: 500,
range: true,
step : 5,
value : 10,
change: function( event, ui ) {
$('#selectedrange').html(ui.values[0] + " and " +ui.values[1]);
}
});
});
</script>
</body>
</html>

Output screenshot.

slider_example

In this article, we learned how useful it is to use a slider component to represent values to end users in a web application. We also learned how to create a JQuery UI slider, it’s available options, methods and events. If you have liked the post, feel free to comment below on comment section.

You may be inerested in following articles: