Estou tentando por meio do VueJS realizar a alteração das paginas e dos valores correspondentes ao mover o input type="range". Por exemplo: value: 16$ / 100K PAGESVIEWS, value: 24$ / 500K PAGEVIEWS
Também gostaria de saber como por meio de um toggle ativado, acrescentar 25% de desconto para o value
new Vue({
el: "#app",
data: {
value: "16.00",
pages: "100K"
},
watch: {
value(pages) {
if(this.value < 9) {
return pages = "10K"
} else if (this.value > 8 && this.value < 13) {
return pages = "50K"
} else if (this.value > 13 && this.value < 17) {
return pages = "100K"
} else if (this.value > 17 && this.value < 25) {
return pages = "500K"
} else {
return pages = "1M"
}
}
}
})
<div id="app">
<div class="bar">
<input v-model="value" type="range" class="mySlider" min="8.00" max="36.00" width="400px">
<div class="values">
<span class="range-pages">{{ pages }} Pageviews</span>
<p>${{ value }}</p> / month
</div>
</div>
<div class="toggle">
Monthly Billing <span> 0/0</span>
Yearly Billing <span class="disc">25% discount</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>