[Vuejs]-Equation for a range for a slider

by

0👍

With Vue you can set min, max, step dynamically also set initial value. Please check snippet:

new Vue({
  el: "#app",
  data: {
      min: 5000,
      updateSlider: 10000, //set your initial value
      max: 200000,
      step: 1000
  },
});
#slider {
  width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="slidecontainer" id="app">
    <input  v-model="updateSlider" :value="updateSlider" type="range" :min="min" :max="max" :step="step" class="slider" id="slider"/>
    <div :style="{left: updateSlider + '%'}" id="selector">
        <div class="selector-thumb">
           <p>{{updateSlider}}</p>
        </div>
    </div>
    <div class="d-flex">
      <div>
        <p>R{{min}}</p>
        <p>min</p>
      </div>
      <div style="margin-left:auto">
        <p >R{{max}}</p>
        <p >max</p>
      </div>
    </div>
</div>

Also check very interesting vue-slider library.

Leave a comment