javascript - noUiSlider - 具有两个输入的双范围 slider + vue.js

Question

我想要一个带有两个输入的双范围 slider 来控制范围。

就像这个: /image/8w0UI.png

我还需要将它与 vue.js 一起使用。

目前我有以下 html:

   <div id="main">
        <br>
        <div id="slider"></div>
        <br>
        <input id="slider-input" v-model="third" v-on:change="updateSlider" />
    </div>

还有我的 JavaScript:

  var vue = new Vue({
    el: '#main',
    data: {
        minRange: 40,
        slider: {
            min: 0,
            max: 100,
            start: 40,
            step: 1
        },
        Slider: document.getElementById('slider')
    },
    methods: {
        updateSlider: function updateSlider() {
            this.Slider.noUiSlider.set(this.minRange);
        }
    },
    ready: function ready() {
        noUiSlider.create(this.Slider, {
            start: this.slider.start,
            step: this.slider.step,
            range: {
                'min': this.slider.min,
                'max': this.slider.max
            }
        });
    }
});

vue.$data.Slider.noUiSlider.on('update', function(values, handle) {
    vue.$data.minRange = values[handle];
});

有了这个，我可以有一个带有一个处理程序的范围 slider 。我可以拖动处理程序，更新输入中的值，还可以写入一些新值并更新处理程序位置 (UI)。

现在，我想添加另一个处理程序，并使用我现在拥有的处理程序执行我能够执行的所有功能。

我该怎么做？ (复制输入，添加 data.maxRange，然后...？

谢谢。

Answer 1

这是您需要在 slider 端进行的调整:

使用两个句柄:

start: [this.slider.startMin, this.slider.startMax]

更新事件必须同时处理:

vue.$data[handle ? 'maxRange' : 'minRange'] = values[handle];

在您的 updateSlider 函数中:

this.Slider.noUiSlider.set([this.minRange, this.maxRange]);