Madeas
@Madeas
UX/UI designer | Frontend developer

Как задать пользовательские шаги v-range?

Использую компонент Vuetify `v-range-slider`. Подскажите, можно ли использовать кастомные значения (шаги) в ползунке и отображать их в input? Прописал тики так, как они должны отображаться, но значения отображаются из выбранного диапазона, а не как в тиках.
https://codepen.io/andrejsharapov/pen/bGVPeva .
Нужно, чтобы оба значения выводились в label и input такие же, как в тиках.
Т.е. второе значение должно быть не 74, а 70,6

Или может есть альтернативное решение? Буду очень признателен.
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Индекс кастомного значения можно определить как разность текущего и минимального:

<template #thumb-label="{ value }">
  {{ ticksLabels[value - min] }}
</template>

Вместо input'ов сделайте select'ы:

computed: {
  items() {
    return this.ticksLabels.map((n, i) => ({
      text: n,
      value: this.min + i,
    }));
  },
},

от <v-select :items="items" v-model="range[0]"></v-select>
до <v-select :items="items" v-model="range[1]"></v-select>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы