noUiSliderスライドの変更範囲

Question

noUIsliderで私を助けることができますか？

私はシンプルなスライダー持っている：私は（左clickmouseを保持）スライディングてるとき

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

を：

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) 
}); 

は、私はスライダーでRIGHまたは左にスライドしていたときに、範囲を動的に変更できますclickmouseを左にせずに？ ありがとうございました！

Answer 1

はい、スライダはちょっとグリッチしますが、ミッドスライドを変更するようには正確には設計されていません。

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>