Vue slider component METHODS

HTML

<div id="app">
  <vue-slider ref="slider" v-model="minValue" v-bind="minOptions"></vue-slider>
  <vue-slider ref="slider" v-model="maxValue" v-bind="maxOptions"></vue-slider>
  <h1>{{ minValue }}, {{ maxValue }}</h1>
</div>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>

CSS

#app {
  margin: 50px;
}

h1 {
  text-align: center;
}

Vue

new Vue( {
  el: '#app',
  data () {
    return {
    	minValue: 0,
      maxValue: 50,
      minOptions: {
        eventType: 'auto',
        width: 'auto',
        height: 10,
        dotSize: 16,
        min: 0,
        max: 100,
        interval: 1,
        show: true,
        speed: 1,
        tooltipDir: 'top'
      },
      maxOptions: {
        eventType: 'auto',
        width: 'auto',
        height: 10,
        dotSize: 16,
        min: 0,
        max: 100,
        interval: 1,
        show: true,
        speed: 1,
        tooltipDir: 'top'
      }
    }
  },
  watch: {
  
    minValue: function( value ) {

      if(this.internalMax < value){
      	this.internalMax = value
      }

  	},

    maxValue: function( value ) {

      if(value < this.internalMin){
      	this.internalMin = value
      }
      
    },
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})