noUiSlider滑动变化范围

我有简单的滑块：

noUiSlider.create(slider, { 
     start: 250, 
     range: { min: 100, max: 500 }, 
     tooltips: [ wNumb({ decimals: 0 }) ], 
     pips: { 
     mode: 'range', 
     behaviour: 'tap', 
     density: 5, 
     }, 
    });

当我滑动（控股左clickmouse）：

var holdSlider; 
document.addEventListener("mousedown", function(){ 
    holdSlider = setInterval(function(){ 

     // how to implement change RANGE of slider 
     // e.g.: range: { min: 400, max: 1000 } 

    }, 10); 
}); 

document.addEventListener("mouseup", function(){ 
    if (holdSlider) clearInterval(holdSlider) 
});

我可以动态改变，当我滑到右击范围或滑块向左不让左鼠标点击鼠标？谢谢！

来源

2017-06-16 James Mahony

是的，虽然滑块会有一点毛刺，但它并不完全是为了更换中间滑片而设计的。

而不是使用setInterval和文档范围的事件侦听器，您可以使用noUiSlider库本身提供的事件侦听器。

Documentation on events

Documentation on updating options

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

 
noUiSlider.create(sliderEl, { 
 
    start: 250, 
 
    range: { min: 100, max: 500 }, 
 
    tooltips: [ wNumb({ decimals: 0 }) ], 
 
    pips: { 
 
     mode: 'range', 
 
     behaviour: 'tap', 
 
     density: 5, 
 
    }, 
 
}); 
 

 
sliderEl.noUiSlider.on('slide', function() { 
 
    // As per documentation, the callback function is called in the context 
 
    // of the slider object, so 'this' can be used to call API methods 
 
    this.updateOptions({ 
 
\t  range: { 
 
      'min': 400, 
 
      'max': 1000 
 
     } 
 
    }); 
 
}); 
 

 
sliderEl.noUiSlider.on('change', function() { 
 
    this.updateOptions({ 
 
     range: { 
 
      'min': 100, 
 
      'max': 500 
 
     } 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.0.0/nouislider.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.0.0/nouislider.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script> 
 

 
<div style="padding: 50px 20px;"> 
 
    <div id="slider"></div> 
 
</div>

来源

2017-06-27 02:29:31

noUiSlider滑动变化范围

回答

相关问题