My goal is to update the value as the slider position changes.
[codepen]https://codepen.io/JakeHenshall/pen/WLezNg
<div id="app">
<v-app id="inspire">
<v-card flat color="transparent">
<v-subheader>Tick labels</v-subheader>
<div v-if="value == 0">
{{ ticksLabels[0] }}
</div>
<div v-else-if="value === 1">
{{ ticksLabels[1] }}
</div>
<div v-else-if="value === 2">
{{ ticksLabels[2] }}
</div>
<div v-else-if="value === 3">
{{ ticksLabels[3] }}
</div>
<div v-else>
{{ ticksLabels[4] }}
</div>
<v-card-text>
<v-slider
v-model="fruits"
:tick-labels="ticksLabels"
:max="4"
step="1"
ticks="always"
tick-size="2"
></v-slider>
</v-card-text>
</v-card>
Javascript:
new Vue({
el: '#app',
data () {
return {
value: 0,
ticksLabels: [
'0 - £5k',
'£5k - £10k',
'£10k - £25k',
'£25k - £50k',
'£50k+'
]
}
}
})
If anyone has tips on how to tidy up the if statement, I would greatly appreciate it.
Many thanks.