data () { return {"list1": [0,1] //list 1" /> data () { return {"list1": [0,1] //list 1" /> data () { return {"list1": [0,1] //list 1"/>

How can I set max and min dynamically in <v-slider> in vue 2.0 when i am extracting max and min from a table

2.8k Views Asked by At

Code:Also help me how can i take steps of 5 here

<v-slider v-model="list1" :min="1" :max="1000">
                            </v-slider>
    data () {
            return {"list1": [0,1] //list 1 will have all the range of data selected.
    }
    }

    created()
    {
    //method call to extract the table data where i calculate max and min in table too
    }
2

There are 2 best solutions below

3
Anatoly On
<v-slider v-model="list1" :min="minValue" :max="maxValue">
                            </v-slider>
    data () {
            return {
             list1: [0,1], //list 1 will have all the range of data selected.
             minValue: 1,
             maxValue: 1000
          }
    }

    created()
    {
      //method call to extract the table data where i calculate max and min in table too
      this.minValue = <calculated minimum value>
      this.maxValue = <calculated maximum value>
    }
0
Chukwuma Nwaugha On

When dynamically setting the max, you should ensure that the number of decimal places in the max matches the interval. For example:

{min: 0, max: 100.5, interval: 0.1}

or 

{min: 0, max: 100.55, interval: 0.01}

This way, it's possible to get to the max from the min using the interval.