vuetify slider custom message

Question

How do i create custom message on vuetify slider ?

I would like to add something like 'The number is: 8'

 <v-slider
            class='slider'
            step="1"
            thumb-label="always"  
            ticks
            tick-size="2"
            :max="8"
            track-color="#E1E4E9"
            thumb-color="#ED5565"
            color='#ED5565'
        ></v-slider>

Answer 1

It is possible to set custom message in vuetify slider, but we need to increase the size of thumb label

working codepen here: https://codepen.io/chansv/pen/vYYwjep?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-card flat color="transparent">
      <v-subheader>Rules</v-subheader>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <v-card-text class="pt-0">
        <v-slider
          v-model="value"
          label="How many?"
          thumb-label="always"
          :thumb-size="120"
        >
          <template v-slot:thumb-label="item">
            The number is: {{item.value}}
          </template>
        </v-slider>
      </v-card-text> 
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      value: 30,
    }
  },
})