noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
I need to update connect option but is not working. Following is the code.
What I am trying to achieve here is that the range is from -5 to 5. and for the values greater than 0 will have connect option set to upper and color blue and for values less than 0 will connect option set to lower and color red.
Questions:
How to make this updateOptions to work.
Is there a better way to achieve what I want?
slider.noUiSlider.on("change", function (values, handle) {
let progressValue = parseInt(values[handle]);
if (progressValue < 0) {
slider.noUiSlider.updateOptions({
connect: 'lower'
});
slider.querySelector(".noUi-connect").style.backgroundColor = 'red'; // Set the slider track color to red for negative values
} else if (progressValue > 0) {
slider.noUiSlider.updateOptions({
connect: 'upper'
});
slider.querySelector(".noUi-connect").style.backgroundColor = 'green'; // Set the slider track color to green for positive values
} else {
slider.querySelector(".noUi-connect").style.backgroundColor = 'transparent'; // Remove background color if the value is 0
}
});
Following are the screenshots of examples what I want to achieve.
I need to update connect option but is not working. Following is the code. What I am trying to achieve here is that the range is from -5 to 5. and for the values greater than 0 will have connect option set to upper and color blue and for values less than 0 will connect option set to lower and color red.
Questions:
Following are the screenshots of examples what I want to achieve.