當我銷燬滑塊時，事件會解除綁定

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。