javascript - noUiSlider 更改幻灯片上的范围

Question

你能帮我解决 noUIslider 问题吗？

我有简单的 slider :

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

当我在 slider 中向右或向左滑动时，我可以更改动态范围而不用左键单击鼠标吗？谢谢!

Answer 1

是的，虽然 slider 会出现一点小故障，但它并不是专门设计来改变幻灯片中间的。

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

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({
	    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>