Slider+calc vue-slider-component like ???

Question

JavaScript

Hello!!
Please tell me.
there is a slider on vue.js.

THE CODE :

new Vue( {
  el: '#app',
  data () {
    return {
      value: 0,
      options: {
        eventType: 'auto',
        width: 'auto',
        height: 13,
        dotSize: 26,
        formatter: "{value}%",
        bgStyle: {
          background: '#ffffff'
        },
        processStyle: {
          background: '#C7E0EF'
        },
        min: 0,
        max: 100,
        interval: 1,
        show: true,
        speed: 1,
        tooltipDir: 'top',
      }
    }
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
});

How to add a calculator here so that when you drag the slider, knowledge changes where 5 years and where 10 years ??
Thanks in advance.

Answer 1

Add an @input="yourNameMethodForCalc" event to the component in the markup. Well, write the method itself. It will have the value of the slider in the first argument.

Answer 2

In data you need to add a variable for the slider

data () {
    return {
      percent: 0
    }
}

In the template, include vue-slider

<vue-slider v-bind="sliderStyleObject" v-model.number="percent" />

where sliderStyleObject is the description of the styles, i.e. what you currently have in options
AND create a computed property for the price

computed: {
  price () {
    return myCalc(this.percent)
  }
}