How to change 2 values by changing the [input type=range] to be rendered on the page? VUEJS

Question

I am trying through Vuejs to change the pages and the corresponding values when moving the input type="range". For example: value: 16$ / 100K PAGESVIEWS, value: 24$ / 500K PAGEVIEWS

I would also like to know how through an activated toggle, add 25% discount to the 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>

Answer 1

You can use computed_properties to calculate the discounted value and the pages, because both depend on the variable value.

Honestly, there’s not much to explain because what I’ve changed is just the structure of your code, I haven’t used any new concept that you’re not already using (outside computed_properties, but you’re already using watch which is more complicated in my opinion).

PS: I created a filter just to format the calculated value.

new Vue({
  el: "#app",
  data: {
    value: 16.00,
  },
  computed: {
    pages: function() {
      if (this.value < 9) return "10K";
      else if (this.value < 13) return "50K";
      else if (this.value < 17) return "100K";
      else if (this.value < 25) return "500K";
      else return "1M";
    },
    value_with_discount: function() {
        return this.value * 0.75;
    },
    yearly_total: function () {
        return this.value_with_discount * 12;
    }
  },  
  filters: {
    decimal: function(value) {
      return parseFloat(value).toFixed(2);
    }
  }
})

<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 | decimal }} / month</p>
          <p>${{ value_with_discount | decimal }} / month (Yearly billing 25% discount) Total: ${{ yearly_total | decimal }}</p>
      </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>