noUiSlider prefix is not updating correctly

Question

So I am using a noUiSlider for price selection. The handle values have a currency prefix, so I need to update it if a customer changes currency, naturally.

Here's my code:

priceSlider.noUiSlider.updateOptions({
  range: {
    min: minPrice,
    max: maxPrice
  },
  format: wNumb({ decimals: 0, prefix: currency })
})

Curiously, the range is being updated just fine, but the prefix is not being updated correctly. Is there something else I need to do to make this happen?

You can only change the 'margin', 'limit', 'step', 'range', 'animate' and 'snap' with updateOptions. https://refreshless.com/nouislider/more/ — dmoo, Aug 30 '16 at 09:29
@dmoo So is the only way to destroy the slider and create a new one? Seems like overkill just to update a prefix. Do you know if there is some way of querying the current prefix (so I can compare it to the new prefix and see if I need to destroy or not)? — j_d, Aug 30 '16 at 09:34

score 0 · Accepted Answer · answered Aug 30 '16 at 09:45

Here's how I ended up doing it:

// Old prefix is different to new prefix, must destroy slider entirely
if ((priceSlider.noUiSlider.get()).charAt(0) != currency) {

  priceSlider.noUiSlider.destroy()
  // Create new slider here

} else {

  // Old prefix is identical, just do a regular update
  coursePriceSlider.noUiSlider.updateOptions({
    // options here
  })

}

noUiSlider prefix is not updating correctly

1 Answers1