Vuetify - How to add html in slider tick labels - vue.js

Question

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'
]
}
}
})

Answer 1

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