The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article, we will see how to set the range option in a slider. The range option is used to set the range of a slider.
Syntax:
$(".selector").slider(
{ range : 'string' | boolean}
);Parameters: This option accepts two parameters as described below.
- string : The range of the slider to be set. Available values are min, max
- boolean: If set to true, the slider has two handles. By default, the value is false.
CDN Link: First, add jQuery UI scripts CDN link, needed for your task.
<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
Below examples illustrate the jQuery UI Slider range Option:
Example 1: In this example, we will be using the boolean value and set is as true.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8" />
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
<script>
$(function () {
$("#gfg").slider({ range: true });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider range Option</h2>
<div id="gfg"></div>
</body>
</html>
|
Output:
Example 2: In this example, we will be using the string value and set is as max
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8" />
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
<script>
$(function () {
$("#gfg").slider({ range: "max" });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider range Option</h2>
<div id="gfg"></div>
</body>
</html>
|
Output:
Example 3: In this example, we will be using the string value as min.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8" />
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
<script>
$(function () {
$("#gfg").slider({ range: "min" });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider range Option</h2>
<div id="gfg"></div>
</body>
</html>
|
Output:
Reference: https://api.jqueryui.com/slider/#option-range