Format with wNumb seems to reset the second handle position

stratboy commented 2 years ago

Hi, I'm sure I'm doing domething wrong.. As soon as I add format with wNumb, second handles of two different sliders, both are resetted to zero position. Values inside the sliders are ok, they correctly follow the expected range, but the second handle gets moved on zero position on init. Here's some code:

      if(this.filter_data.datatype == 'integer'){ format = wNumb({ decimals: 0 }); }
      if(this.filter_data.datatype == 'float'){ format = wNumb({ decimals: 1 }); }

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

Ranges:

"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
max: Array [ 6800 ]
min: Array [ 300 ]

"2.4390243902439024%": 0.4
"4.878048780487805%": 0.6
"7.317073170731707%": 0.8
"9.75609756097561%": 1
"12.195121951219512%": 1.2
"14.634146341463415%": 1.5
"17.073170731707318%": 1.8
"19.51219512195122%": 2
"21.95121951219512%": 2.2
"24.39024390243902%": 2.5
"26.829268292682922%": 3
"29.268292682926823%": 3.5
"31.707317073170724%": 4
"34.14634146341463%": 4.2
"36.58536585365853%": 4.5
"39.02439024390243%": 5
"41.46341463414633%": 6
"43.90243902439023%": 7
"46.341463414634134%": 8
"48.780487804878035%": 9
"51.219512195121936%": 9.5
"53.65853658536584%": 10
"56.09756097560974%": 11.5
"58.53658536585364%": 12
"60.97560975609754%": 15
"63.41463414634144%": 18
"65.85365853658534%": 19
"68.29268292682924%": 22
"70.73170731707314%": 25
"73.17073170731705%": 29
"75.60975609756095%": 30
"78.04878048780485%": 31
"80.48780487804875%": 35
"82.92682926829265%": 40
"85.36585365853655%": 47
"87.80487804878045%": 60
"90.24390243902435%": 120
"92.68292682926825%": 148
max: Array [ 400 ]
min: Array [ 0 ]

Without format:

With format:

How to solve?

stratboy commented 2 years ago

I've just solved: I saved min/max values as arrays, and probably wNumb can't convert them. By saving them as numbers, it works. Still, I don't fully understand a couple of things:

why on docs is often used array as range value, especially for min/max
why wNumb is not recognizing and converting array values when applied to noUISlider (I suggest at least to clearly advise on your docs :) )

leongersen commented 2 years ago

What's happening in your case is that wNumb is stricter than the default format on the slider; the array values you are providing for handles get cast to string, then handled as numbers without a format set. With a wNumb format, they get parsed as false, which ends up as 0 when cast to a Number.

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.

leongersen / noUiSlider

Format with wNumb seems to reset the second handle position #1203