Question

我想要一个带有两个输入的双量程滑块来控制范围。

就像这样： https://i.stack.imgur.com/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];
});

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

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

我该怎么做？（复制输入，添加data.maxRange和...？

感谢。

Answer 1

以下是滑块末端需要的调整：

使用两个手柄：

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

更新事件必须同时处理：

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

在updateSlider函数中：

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

Answer 2

在需要相同的东西后，我想出了一个相当简单的答案。我看了同样的滑块，决定根据我发现的js滑块找出自己的滑块。下面是小提琴。

js fiddle dual range slider in vuejs

var app = new Vue({
  el: '#app',
  data: {
    minPrice: "500",
    maxPrice: "50000"
  },
  methods: {
    slider: function() {
      if (this.minPrice > this.maxPrice) {
        var tmp = this.maxPrice;
        this.maxPrice = this.minPrice;
        this.minPrice = tmp;
      }
    }
  }
})

.range-slider {
  width: 300px;
  margin: auto;
  text-align: center;
  position: relative;
  height: 6em;
}

.range-slider svg,
.range-slider input[type=range] {
  position: absolute;
  left: 0;
  bottom: 0;
}

input[type=number] {
  border: 1px solid #ddd;
  text-align: center;
  font-size: 1.6em;
  -moz-appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=number]:invalid,
input[type=number]:out-of-range {
  border: 2px solid #ff6347;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2497e3;
}

input[type=range]:focus::-ms-fill-lower {
  background: #2497e3;
}

input[type=range]:focus::-ms-fill-upper {
  background: #2497e3;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #2497e3;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}

input[type=range]::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #2497e3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div class="range-slider">
    <span @change="slider">from <input v-model.number="minPrice" type="number"  min="0" max="120000"/> to <input  v-model.number="maxPrice" type="number"  min="0" max="120000"/></span>
    <input @change="slider" v-model.number="minPrice" min="0" max="120000" step="500" type="range" />
    <input @change="slider" v-model.number="maxPrice" min="0" max="120000" step="500" type="range" />
    <svg width="100%" height="24">
                          <line x1="4" y1="0" x2="300" y2="0" stroke="#444" stroke-width="12" stroke-dasharray="1 28"></line>
                        </svg>
  </div>
</div>

Answer 3

我不认为可以调整该组件并使其成为范围滑块。

有一个JQuery UI组件可以管理范围： https://jqueryui.com/slider/#range

并且，可以包装JQuery UI组件，并使它们在Vue环境中工作： https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

如果你能让两者一起工作，它将满足你的要求。此外，您必须将JQuery和JQuery UI捆绑为依赖项。

noUiSlider - 双量程滑块，带两个输入+ vue.js

3 个答案: