Sometimes, we want to get the selected value from jQuery UI slider.
In this article, we’ll look at how to get the selected value from jQuery UI slider.
Get the Selected Value from jQuery UI Slider
To get the selected value from jQuery UI slider, we can call the slider method with an object that has the change method that takes the slider value as a parameter.
For instance, we can write:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div id="slider"></div>
to add the script tags for jQuery and jQuery UI and the link tag for jQuery UI.
Then we add a div which we can turn into a slider.
Next, we write:
$('#slider').slider({
change(event, ui) {
console.log(ui.value);
}
});
to select the div with:
$('#slider')
Then we call slider with an object with the change method.
And we get the slider value with the ui.value property.
Now when we finished sliding, we see the selected value logged.
Conclusion
To get the selected value from jQuery UI slider, we can call the slider method with an object that has the change method that takes the slider value as a parameter.
