JQuery UI Slider Example on HTML or JSP

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

In the previous post, we learned about how to create a date-picker using the JQuery UI date picker plugin.

In this article, we will learn about how to use the JQuery UI slider on HTML or JSP.

We will also learn about different useful options, methods available with the JQuery UI slider.

Creating the JQuery UI slider component

To create the JQuery UI slider component, we need to import the necessary libraries, HTML elements, etc.

Import the library files

The first step to implement the slider is importing the required javascript libraries to our HTML/ JSP page.

We need to import JQuery and JQuery UI plugin libraries and JQuery UI CSS files to our page. This can be achieved by using the tag and CSS files using the 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 the previous step, we imported the required javascript and CSS libraries. Now we need to add an HTML snippet, which contains a simple <div> element, which we can use as a slider component.

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

Add the required javascript to enable the slider

Now it’s time for real action. Add the following javascript snippet to the page to enable the JQuery UI slider.

This is the script necessary for initializing the slider component on our page.

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

JQuery UI slider configurations

JQuery UI slider offers different methods, options, and events.

The below list contains a few of them.

Options

  • animate : We can use this 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 : The option 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: We can use this option to set the value of the handle. We can also use this option to set the value of the first handle of the bar in case of range option is used. The option accepts a number as the parameter value.
  • values: We can use this option to set values for the range handles if the range value is 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 : We can use this method to disable the slider. Ex: $(‘#slider’).slider(“disable”);
  • enable : We can use this method to enable the slider component. Ex: $(‘#slider’).slider(“enable”);
  • option : The method to set the slider options.
  • value : The method to get/set the slider value. Ex: $( “.selector” ).slider( “value” );
  • values : The method 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 the 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

Conclusion

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, its available options, methods, and events.