Vuetify - ограничить минимальное значение, на которое можно перемещать ползунок в v-slider

Question

Я использую компонент V-слайдера Vuetify, и он прекрасно работал, пока у меня не появилось требование, в котором мне нужно было установить минимальное значение, выше которого ползунку запрещалось бы двигаться.

Например, еслиv-слайдер имеет диапазон от 0 до 10, я хочу ограничить движение большого пальца минимумом до 2, поэтому, если пользователь пытается переместить большой палец до значения меньше 2, ему не следует это делать.

Iне нашел ни одного настраиваемого свойства для этого в vuetify v1.5. Это достижимо? Вот мой код:

<div id="app">
  <v-app id="inspire">
    <v-card flat color="transparent">  
      <v-card-text>
        <v-layout row>
          <v-flex class="pr-3">
            <v-slider
              v-model="slider"
              :max="max"
              :min="min"
            ></v-slider>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-app>
</div>

JS:

new Vue({
  el: '#app',
  data () {
    return {
      min: 0,
      max: 10,
      slider: 6
    }
  }
})

Codepen - https://codepen.io/vishalgulati/pen/gOOMJvX

Answer 1

Попробуйте это:

<v-slider
      v-model="slider"
      :max="max"
      :min="min"
      @input="catchInput"
      :key="sliderKey"
>
</v-slider>
new Vue({
  el: '#app',
  data () {
    return {
      min: 0,
      max: 10,
      slider: 6,
      sliderKey: 0

    }
  },
  methods: {
    catchInput(e){
      if (e < 3){
        this.slider = 2
        this.sliderKey++
      }
    }
  }
})

То, что это делает, ловит ввод и проверяет, равно ли оно 2 или меньше. В этом случае метод catchInput устанавливает значение ползунка равным 2 и вызывает повторную визуализацию ползунка с помощью sliderKey. Надеюсь, это понятно.