Post by erik on Jul 9, 2024 11:42:31 GMT
How do you create a pair of sliders in Molnify to define an interval?
In other words, we want to restrict a pair of sliders so that the min slider shouldn't be able to have a value equal to or larger than the max slider, and vice-versa.
The above sliders cannot cross each other.
UI Strings. First, we add the following UI strings for the sliders to connect: "class=minSlider" and "class=maxSlider". These names can be anything, but I strongly recommend that they are descriptive.
- Alternatively, you can find the element ID of the sliders which you want to connect, and adapt the JavaScript to query their IDs. This method has the drawback of breaking if you add other input elements before the sliders when you make changes to your app.
Javascript. Add the following JavaScript to your JavaScriptAfterLoad metadata. Change the $(".minSlider") and $(".maxSlider") to find the classes you defined in the UI strings:
$(document).ready(function() {
var $minSlider = $(".minSlider");
var $maxSlider = $(".maxSlider");
// Get the ionRangeSlider instances
var minSliderInstance = $minSlider.data("ionRangeSlider");
var maxSliderInstance = $maxSlider.data("ionRangeSlider");
// Attach event handlers to enforce constraints
$minSlider.on('change', function() {
var minValue = parseInt($minSlider.val());
var maxValue = parseInt($maxSlider.val());
if (minValue >= maxValue) {
minValue = maxValue-1;
minSliderInstance.update({ from: minValue });
}
});
$maxSlider.on('change', function() {
var minValue = parseInt($minSlider.val());
var maxValue = parseInt($maxSlider.val());
if (maxValue <= minValue) {
maxValue = minValue+1;
maxSliderInstance.update({ from: maxValue });
}
});
// Optionally, you can also enforce constraints on initial load
var minValue = parseInt($minSlider.val());
var maxValue = parseInt($maxSlider.val());
if (minValue >= maxValue) {
minValue = maxValue-1;
minSliderInstance.update({ from: minValue });
}
if (maxValue <= minValue) {
maxValue = minValue+1;
maxSliderInstance.update({ from: maxValue });
}
});