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滑動變化範圍

回答

相關問題