События становятся несвязанными, когда я уничтожаю слайдер

Question

Мне нужно обновить диапазон и числовое форматирование слайдера (формат) в зависимости от ввода пользователем. Поскольку формат не относится к числу параметров, которые я могу обновить с помощью метода updateOptions, мне нужно уничтожить слайдер и создать новый. Но события, которые я подключил к исходному слайдеру, перестали работать, хотя документы говорят, что «события не развязаны при уничтожении слайдера» https://refreshless.com/nouislider/more/ Что случилось с моим кодом? Есть ли способ связать события назад?

var slider = document.getElementById('slider'); 

noUiSlider.create(slider, { 
    start: [ 1000000 ], 
    step: 1000, 
    connect: 'lower', 
    range: { 
     'min': [ 500000 ], 
     'max': [ 5000000 ] 
    }, 
    format: rubleFormat 
}); 

//code's getting redundant, I repeat it. Will fix later 
function updateSlider(currency) { 
    if(currency == 'USD') { 
    slider.noUiSlider.destroy(); 
    noUiSlider.create(slider, { 
     start: [ 10000 ], 
     step: 100, 
     connect: 'lower', 
     range: { 
      'min': [ 5000 ], 
      'max': [ 300000 ] 
     }, 
     format: dollarFormat 
    }); 
    } 
    else { 
    slider.noUiSlider.destroy(); 
    noUiSlider.create(slider, { 
     start: [ 1000000 ], 
     step: 1000, 
     connect: 'lower', 
     range: { 
     'min': [ 500000 ], 
     'max': [ 5000000 ] 
     }, 
     format: rubleFormat 
    }); 
    } 
} 

Answer 1

Предполагая rubleFormat и dollarFormat являются экземплярами wNumb, вы можете переключиться из форматтера. Набор format бросить в Number:

var currentFormatter = rubleFormat; 

function updateSlider(currency) { 
    currentFormatter = currency === 'USD' ? dollarFormat : rubleFormat; 
    slider.noUiSlider.updateOptions({ /* ... */ }); 
} 

slider.noUiSlider.on('update', function(values, handle){ 
    input.value = currentFormatter.to(values[handle]); 
}); 

input.addEventListener('change', function(){ 
    slider.noUiSlider.set(currentFormatter.from(this.value)); 
}); 

Это будет путь более производительным, чем восстановление слайдер, тоже.

Example.