Jquery UI's slider() widget will create a slider from a DIV element. You can select a numeric value by dragging its handle.
To create slider in Jquery UI, create a DIV element and give a id or class value to select in Jquery. And then apply slider() method on it.
Example-
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI slider()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<div id="slider"></div>
<script>
$(document).ready(function(){
$("#slider").slider();
});
</script>
</body>
</html>
Options of slider() method
| Option | Value |
|---|---|
| max | numeric value |
| min | numeric value |
| value | A value between min & max options |
| range | "min", "max" |
max Option
This defines the maximum value of slider.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI slider()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<div id="slider"></div>
<script>
$(document).ready(function(){
$("#slider").slider({
max:10,
});
});
</script>
</body>
</html>min Option
The value of the slider when it initializes, will be defined in the min option.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI slider()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<div id="slider"></div>
<script>
$(document).ready(function(){
$("#slider").slider({
max:10,
min:3
});
});
</script>
</body>
</html>value Option
Defines default value of the slider.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI slider()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<div id="slider"></div>
<script>
$(document).ready(function(){
$("#slider").slider({
max:10,
min:1,
value:5
});
});
</script>
</body>
</html>range Option
It has two values min and max. When it is defined min the stylish range will be in the left side of the handle. If it is defined max then stylish range will be in the right side.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI slider()</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>
<body>
<div id="slider"></div>
<script>
$(document).ready(function(){
$("#slider").slider({
max:100,
value:20,
range:"min",
});
});
</script>
</body>
</html>
hidden class - .ui-slider-range
Official documentation:- https://api.jqueryui.com/slider/
| || Jquery UI spinner() widget |
| || Jquery UI progressbar() widget |
| || Jquery UI tooltip() widget |
Publish A Comment