Vuetify - How to add html in slider tick labels

0
votes

I am using Vuetify in my vue app and need to give HTML tags in my tick labels, I checked Vuetify doc but found it accepts string and in case we pass HTML, it renders it as string. Is there a way we can inject HTML in tick labels. Here is what I have tried:

Codepen link here: https://codepen.io/vishalgulati/pen/gOYyMza?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-card flat color="transparent">
      <v-subheader>Tick labels</v-subheader>

      <v-card-text>
        <v-slider
          v-model="fruits"
          :tick-labels="ticksLabels"
          :max="3"
          step="1"
          ticks="always"
          tick-size="2"
        ></v-slider>
      </v-card-text>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      value: 0,
      fruits: 0,
      ticksLabels: [
        '<span>&nbsp</span>',
        '',
        'Pear',
        'Apple'
      ]
    }
  }
})
1
vue.jsvuejs2vuetify.js

1 Answers

0
votes

Use template slot for thumb-label. Found in their documents: 

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col class="pa-12">
        <v-range-slider
          :tick-labels="seasons"
          :value="[0, 1]"
          min="0"
          max="3"
          ticks="always"
          tick-size="4"
        >
          <template v-slot:thumb-label="props">
            <v-icon dark>
              {{ season(props.value) }}
            </v-icon>
          </template>
        </v-range-slider>
      </v-col>
    </v-row>
  </v-app>
</div>

...
  data: () => ({
    seasons: [
      'Winter',
      'Spring',
      'Summer',
      'Fall',
    ],
    icons: [
      'mdi-snowflake',
      'mdi-leaf',
      'mdi-fire',
      'mdi-water',
    ],
  }),

  methods: {
    season (val) {
      return this.icons[val]
    },
  },
})

source: https://vuetifyjs.com/en/components/sliders#custom-range-slider codepen: https://codepen.io/pen/?&editable=true&editors=101