Pips not completely rendered

[carlosescri]

Hi again @leongersen.

I have a strange issue with the pips. I was able to reproduce it in v11 too because we use that version in our current frontend components. Now I'm working with the latest version and here it is again.

The problem is that right side of the pips is not rendered some times:

This is working:

{
  "range": {
    "min": 1.6365437507629395,
    "max": 61171.3828125
  },
  "start": [
    1.6365437507629395,
    61171.3828125
  ],
  "behaviour": "tap",
  "documentElement": "<the html element…>",
  "connect": true,
  "padding": 0,
  "orientation": "horizontal",
  "direction": "ltr",
  "tooltips": false,
  "animate": true,
  "keyboardSupport": true,
  "pips": {
    "mode": "count",
    "values": 3,
    "density": 6,
    "format": {
      "to": "<function …>"
    }
  }
}

In the console:

JSON.stringify($0.noUiSlider.get());
// "["1.64","61171.38"]"

Then, I update the range with:

$0.noUiSlider.updateOptions({
  range: {
    min: 2.182058334350586,
    max: 5138.29296875
  },
  start: [
    2.182058334350586,
    5138.29296875
  ]
});

And I get:

These are the options:

{
  "range": {
    "min": 2.182058334350586,
    "max": 5138.29296875
  },
  "start": [
    1.6365437507629395,
    61171.3828125
  ],
  "behaviour": "tap",
  "documentElement": "<the html element…>",
  "connect": true,
  "padding": 0,
  "orientation": "horizontal",
  "direction": "ltr",
  "tooltips": false,
  "animate": true,
  "keyboardSupport": true,
  "pips": {
    "mode": "count",
    "values": 3,
    "density": 6,
    "format": {
      "to": "<function …>"
    }
  }
}

options.start was not updated… but I can do:

JSON.stringify($0.noUiSlider.get()) 
// "["2.18","5138.29"]"

options.format contains only a to function but seems that formatting is not the problem because the bug is not fixed if I remove my formatting functions.

I was not able to go too far with debugging but seems that the function that generates the array of values used to paint the pips stops at 50% and does not generate the rest of values (generateSpread())…

The first sample:

The bug:

[leongersen]

That indeed looks strange. Does that only happen when using updateOptions, or also when initializing the slider with those settings?

[carlosescri]

Hi @leongersen, thanks for the response. I was using the slider as a webcomponent so I've created the simplest case with the minimal settings to reproduce the bug: https://jsfiddle.net/carlosescri/tn1whu76/

Seems it happens when initializing the slider with those settings.

Thanks!

[leongersen]

This is fixed in noUiSlider 14.6.1. Thanks for reporting, @carlosescri!

[carlosescri]

Thanks @leongersen ! I'll try it ASAP.

[github-actions[bot]]

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.