CODEWITHSUNDEEP
vue.jsslidervue-slider-component
negabaro
negabaro

Reputation: 3965

how to set range without max values in vue-slider

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.

Upvotes: 1

Views: 3012

Answers (2)

Mohsen
Mohsen

Reputation: 4235

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/

Upvotes: 1

gijoe
gijoe

Reputation: 1189

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/

Upvotes: 1

Related Questions