如何在vue-slider中设置没有最大值的范围

Question

我正在使用 vueSlider。

看下面的例子link，我觉得只能设置min和max里面的整数

<vue-slider
ref="slider"
v-model="value"
min="0"
max="100"

example

但是我想设置一个不是整数的范围。比如我想设置30秒到1:30分钟范围内的值。

有没有办法在vue-slider中实现类似上面例子的东西？

如果不能，请告诉我您是否有其他选择。

感谢阅读我的问题。

Answer 1

是的，你可以做到

删除你不需要的最小值和最大值

你需要使用的是 :data 属性，它可以接受一个值数组（数字或字符串 e.t.c）

一个小的实现会像这样

e.x.

<div id="app">
   <vue-slider :data="datas" v-model="vvalue"  :marks="true"></vue-slider>
</div>

new Vue({
  el: '#app',
  data:{
    message:'hi there',
    vvalue:'30',
    datas:['30','45','1:00','1:30']
  },
  components: {
    VueSlider: window['vue-slider-component']
  }
})

你也可以在这里查看一个工作示例 https://jsfiddle.net/9ejrwz2t/1/

Answer 2

如果你想在秒内显示 vue-slider 值，你可以使用格式化程序：

  <vue-slider
    ref="slider"
    v-model="value"
    v-bind="options"
    :min="15"
    :max="360"
    :interval= "1"
    :tooltip="'always'"
    :tooltip-formatter="Tformatter"
  >
  </vue-slider>

new Vue( {
  el: '#app',
  data () {
    return {
      value: 15,
      Tformatter: val => {
        let min = Math.floor(val/60);
        let sec = val%60 > 9 ? val%60 : "0"+val%60;
        return min+':'+sec;
      }
    }
  },

此处更新了您的示例：https://jsfiddle.net/d1qwx3gv/

如何在vue-slider中设置没有最大值的范围

how to set range without max values in vue-slider

slider

vue.js

vue-slider-component