how to set range without max values in vue-slider

Question

I am using vueSlider.

Looking at the example below link, I think that only the integers in min and max can be set.

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

example

But I would like to set a range that is not an integer. For example, I want to set the value from 30 seconds to 1:30 minutes in the range.

Is there a way to implement something like the above example in vue-slider?

If it could not, please let me know if you have any alternatives.

Thanks for reading my question.

Answer 1

Yes you can do it

remove min and max you won't need them

what you need to use is the :data property which can take an array of values (numbers or strings e.t.c)

a small implementation would be like this

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']
  }
})

you can check a working example here also https://jsfiddle.net/9ejrwz2t/1/

Answer 2

You can use formatter if you want show vue-slider value in second:

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

Here is updated your example : https://jsfiddle.net/d1qwx3gv/