jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. The rangeslider widget of jQuery Mobile is a double handle slider. The sliders have a min and a max value to be set and we can choose from the range in between min and max.
In this article, we are going to implement jQuery Mobile rangeslider normalize event. This event is triggered whenever the knobs are overlapped. The input values are normalized in such an event. A callback is specified to perform any action on such events.
Syntax: Create the callback function for normalize event as follows:
$("#divID").rangeslider({
normalize: function(event, ui)
{
// Your code
},
});Parameters: It accepts a callback function that holds one parameter.
- event: It accepts event type value.
CDN Links: Use the following CDNs for the jQuery Mobile project.
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
Example: In this example, we are going to log time when the normalize event is triggered i.e. when the knobs of the rangeslider overlaps.
<!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=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Rangeslider normalize event</h3>
<div data-role="rangeslider" id="divID">
<label for="range-slider-1">Rangeslider:</label>
<input name="range-slider-1" min="0" max="100" value="10" type="range">
<label for="range-slider-2" id="name">
Rangeslider:
</label>
<input name="range-slider-2" min="0" max="100" value="60" type="range">
</div>
<script>
$(document).ready(function() {
$("#divID").rangeslider({
normalize: function(event, ui) {
console.log("Overlapped handles at: ",
new Date().getTime());
},
});
});
</script>
</body>
</html>
|
Output:
Reference: https://api.jquerymobile.com/rangeslider/#event-normalize