How to set custom v-range steps?

Question

Vue.js

I'm using the Vuetify `v-range-slider` component. Tell me, is it possible to use custom values ​​(steps) in the slider and display them in the input? Registered ticks as they should be displayed, but the values ​​are displayed from the selected range, and not as in ticks.
https://codepen.io/andrejsharapov/pen/bGVPeva .
It is necessary that both values ​​are displayed in label and input the same as in ticks.
Those. the second value should not be 74, but 70.6

Or maybe there is an alternative solution? I would be very grateful.

Answer 1

The index of a custom value can be defined as the difference between the current and the minimum:

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

Instead of inputs, make selects:

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>