Возможно ли использовать аналог v-model для установки max, min в input type="range"?

Question

[VctorIAN]

Здравствуйте, я могу использовать
<input type="range" v-model="liters" /> и описать liters в data

data() {
    return {
      liters: 0,
      litersMin: 0,
      litersMax: 100,
    };
  },

но как мне связать также минимальное и максимальное значение в range - чтоб они также были реактивными

Answer 1

[wakenbyWork]

<template>
  <input type="range" v-bind:min="litersMin" v-bind:max="litersMax" v-model="liters" />
</template>

<script>
export default {
  data() {
    return {
      liters: 0,
      litersMin: 0,
      litersMax: 100
    }
  }
}
</script>

Comments

[Aetae]

P.S: Если litersMin и litersMax будут меняться, то нужно использовать computed свойство:

Шо? Нет. data реактивная, computed нужен для другого. =\

[wakenbyWork]

Aetae, Вы правы, исправил ответ