javascriptslideruislidernouislider

how to set the handle middle nouislider


how to set the handle in middle without setting the start value 50.

currently I am making a scrollbar with this plugin. but problem is it's open with always start value .I don't want it. I want something like this , at first scroll start from 0 and the handle stay in the middle of the slider . how do I achieve it ?

like this

here is my code

  let verticalBaseSlider = document.getElementById("baseControler");
  if (verticalBaseSlider) {
    noUiSlider.create(verticalBaseSlider, {
      start: 50,
      direction: "ltr",
      orientation: "vertical",
      connect: 'lower',
      animate: false,
      range: {
        min: 0,
        max: 100,
      },
    });

      verticalBaseSlider.noUiSlider.on("update", function (values, handle) {
        let panel = document.getElementById("four");
        let total = panel.scrollHeight - panel.offsetHeight;
        let percentage = total * (values[handle] / 100);
        panel.scrollTop = percentage;
    });
    
  }

Solution

  • noUiSlider.updateOptions() is the best solution of the question.