The slider widget creates the slider functionality:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" />
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<title>jQueryUI</title>
</head>
<body>
<div id="slider"></div>
<script type="text/javascript">
$(function () {
$('#slider').slider();
});
</script>
</body>
</html>
Stylization
Using the classes generated by the widget, you can customize its styling. When a widget is applied, the class is added to the element ui-slider. Let’s style this class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" />
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<title>jQueryUI</title>
<style>
.ui-slider {
background: #029843;
margin: 10%;
width: 200px
}
</style>
</head>
<body>
<div id="slider"></div>
<script type="text/javascript">
$(function () {
$('#slider').slider();
});
</script>
</body>
</html>
Slider Properties
Using the following properties of the slider, you can fine-tune it:
aimate: Sets the animation speed. We can pass speed names as values, such as “fast” (fast animation) and “slow” (slow animation).( $(‘#slider’).slider({ animate: ‘slow’ }))
You can also set a numeric value indicating the duration of the animation in milliseconds ( $(‘#slider’).slider({ animate: 900 }))
- disabled: when set, true makes the slider unavailable
- max: maximum slider value, default is 100
- min: slider minimum value, default is 0
- orientation: slider orientation, can be horizontal (“horizontal” by default) or vertical (“vertical”). For example:$(‘#slider’).slider({orientation:’vertical’})
- range: indicates whether the part of the slider that has been traversed by the slider will be styled
Can take a boolean value. If is set to true, then the last part of the slider is styled. The default value is false, so no styling takes place.
It can also have string values minand max. If equal to min, then stylization, that is, coloring will be performed first of the slider counts, if max- then from the end:$(‘#slider’).slider({range: ‘max’ })
- step: slider increment step, default is 1
- value: defines the slider value
- values: using this property, we can set several sliders at once for the slider:$(‘#slider’).slider({values: [ 10, 25, 50]})
Slider Methods
The slider has the following methods:
- slider(“disable”): makes the slider unavailable:$(“#slider”).slider(“disable”);
- slider(“enable”): makes the slider available for interaction
- slider(“destroy”): removes the slider widget functionality from an element
- slider(“widget”): returns a jQuery object representing the widget ( var widget = $(“#slider”).slider(“widget”);)
- slider(“option”): allows you to get or set slider property values. For example, let’s set and get the value of the value property:
$('#slider').slider();
// installation
$('#slider').slider('option', 'value', 30);
// get value
var val=$('#slider').slider('option', 'value');
console log(val);
[/html]
slider("value"): Returns or sets the value of the property value. For example, let's get the value $('#slider').slider('value');. And by passing a numeric value as the second parameter, we can set the value of the slider:$('#slider').slider('value', 44);
Since a slider can have multiple sliders, the method slider('value')has a counterpart that helps get or set multiple values at once - for each slider. For example, let's get all the values:
[js]
// creating a widget
$('#slider').slider({values: [10,80]});
// set values
$('#slider').slider('values', [30,60]);
// getting values
vals=$('#slider').slider('values');
console log(vals);
Slider Events
The slider has several events that help track its changes:
- change(event, ui): the event fires when the user moves the slider, and also when the value of the property value is changed programmatically
- create(event, ui): raised when the widget is created
- slide(event, ui): occurs when moving the mouse along the slider bar
- start(event, ui): the event fires when the user starts moving the slider bar
- stop(event, ui): event fired when the user finishes moving the slider
Now apply the slider events:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" />
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<title>jQueryUI</title>
<style>
.ui-slider {
background: #029843;
margin: 10%;
width: 200px
}
</style>
</head>
<body>
<h3>Slider</h3>
<div id="slider"></div> <br />
Slider current value: <span id="sliderValue"></span>
<script type="text/javascript">
$(function () {
$('#slider').slider({
change: function (event, ui) {
varval = $('#slider').slider('value');
$('#sliderValue').html(val);
},
start: function (event, ui) {
console.log('Start slider movement');
},
slide: function (event, ui) {
console.log('Slider moving');
},
stop: function (event, ui) {
console.log('Slider movement completed');
}
});
});
</script>
</body>
</html>