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

【问题标题】：how to set range without max values in vue-slider如何在 vue-slider 中设置没有最大值的范围
【发布时间】：2020-10-16 18:53:17
【问题描述】：

我正在使用vueSlider。

看下面链接的例子，我认为只能设置min和max中的整数。

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

example

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

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

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

感谢您阅读我的问题。

【问题讨论】：

标签： vue.js slider vue-slider-component

【解决方案1】：

如果你想在秒内显示 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/

【讨论】：

【解决方案2】：

是的，你可以做到

去掉你不需要的最小值和最大值

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

一个小的实现会是这样的

例如

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

【讨论】：