Update connect option

[jamal-tmam]

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:

1. How to make this updateOptions to work.
2. 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.