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

Question

[Andrej Sharapov]

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

Или может есть альтернативное решение? Буду очень признателен.

Answer 1

[0xD34F]

Индекс кастомного значения можно определить как разность текущего и минимального:

<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>

Comments

[Andrej Sharapov]

спасибо огромное!