leongersen / noUiSlider

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.
https://refreshless.com/nouislider/
MIT License
5.7k stars 657 forks source link

Question: set() seems not working properly #1197

Closed stratboy closed 2 years ago

stratboy commented 2 years ago

Hi, here's my related code:

      this.slider = document.querySelector('.filter-range');

      // [...] do other things and build the range var

      noUiSlider.create(this.slider, {
        start: [range.min, range.max],
        connect: true,
        snap: true,
        tooltips: true,
        range: range
      });

Then, on another method:

    update_enabled_values(){
      this.slider.noUiSlider.set([20, 80], false);
      //this.slider.noUiSlider.setHandle(1, "65.625%", false);
    },

What I need is to move the handles based on an app event, passing positions, and without firing set/change events. The above is only a fast 'manual' test.

That doesn't work: both handles are moved to the zero position. I tried different syntaxes, both with setHandle() and set(), the above are just 2 examples. It never worked. What am I doing wrong? By the way, the generated range is something like this:

{
  "min": [
    300
  ],
  "max": [
    6800
  ],
  "3.125%": 350,
  "6.25%": 400,
  "9.375%": 450,
  "12.5%": 500,
  "15.625%": 550,
  "18.75%": 600,
  "21.875%": 650,
  "25%": 700,
  "28.125%": 800,
  "31.25%": 850,
  "34.375%": 900,
  "37.5%": 950,
  "40.625%": 1000,
  "43.75%": 1100,
  "46.875%": 1150,
  "50%": 1200,
  "53.125%": 1300,
  "56.25%": 1350,
  "59.375%": 1400,
  "62.5%": 1500,
  "65.625%": 1800,
  "68.75%": 1900,
  "71.875%": 2000,
  "75%": 2200,
  "78.125%": 2300,
  "81.25%": 2500,
  "84.375%": 3400,
  "87.5%": 3600,
  "90.625%": 5000
}

Thank you

leongersen commented 2 years ago

With your min value at 300, setting the handles to 20 and 80 sets both to the minimum value, at 300.

stratboy commented 2 years ago

I see... Thank you! Especially for the patience... :) Have a nice day!

leongersen commented 2 years ago

Glad I could help :)

github-actions[bot] commented 2 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.