当我销毁滑块时,事件会被解除绑定

时间:2016-06-09 20:57:00

标签: javascript nouislider

我需要根据用户输入更新滑块的范围和数字格式(格式选项)。 由于格式不在我可以使用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
    });
  }
}

1 个答案:

答案 0 :(得分:0)

假设rubleFormatdollarFormatwNumb的实例,您可以切换格式化程序。设置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