Question

你可以用noUIslider帮助我吗？

我有简单的滑块：

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

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

Answer 1

是的，虽然滑块会有一点毛刺，但它并不是设计用于改变幻灯片的中间位置。

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

Documentation on events

Documentation on updating options

＆＃13;

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

＆＃13;

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

＆＃13;

noUiSlider在幻灯片上更改范围

1 个答案: