Vue sliders H & V

by firegroove

HTML

<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>
<div id="app">
  <vue-slider ref="slider" v-model="value" v-bind="options"></vue-slider>
  <h1>{{ value }}</h1>
  <button @click="log($refs.slider.getValue())">Output Value</button>
</div>

<div id="app_2">
  <vue-slider ref="slider" v-model="value" v-bind="options"></vue-slider>
  <h1>{{ value }}</h1>
</div>

<div style="margin-left:50px">
  <div id="app_3">
    <vue-slider ref="slider" v-model="value" v-bind="options"></vue-slider>
  </div>
  <div id="app_4">
    <vue-slider ref="slider" v-model="value" v-bind="options"></vue-slider>
  </div>
<div id="app_5">
  <vue-slider ref="slider" v-model="value" v-bind="options"></vue-slider>
</div>  
</div>


<!-- <script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>
 -->

CSS

#app,
#app_2 {
  margin: 50px;
}

#app_3,
#app_4,
#app_5{
  display: inline-block;
  /* border: 1px solid red; */
  margin-right: 20px;
}

h1 {
  text-align: center;
}

Vue

new Vue( {
  el: '#app',
  data () {
    return {
    	value: 0,
      options: {
        eventType: 'auto',
        width: 300,
        height: 6,
        dotSize: 12,
        min: 0,
        max: 100,
        interval: 1,
        show: true,
        speed: 1,
        tooltipDir: 'top',
      }
    }
  },
  methods: {
  	log (v) {
    	window.alert(v)
    }
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})

new Vue( {
  el: '#app_2',
  data () {
    return {
    	value: 0,
      options: {
        eventType: 'auto',
        width: 300,
        height: 6,
        dotSize: 12,
        min: 0,
        /* direction: 'vertical', */
        max: 100,
        interval: 1,
        show: true,
        speed: 1,
        tooltipDir: 'top',
      }
    }
  },
  methods: {
  	log (v) {
    	window.alert(v)
    }
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})
new Vue( {
  el: '#app_3',
  data () {
    return {
    	value: 0,
      options: {
        eventType: 'auto',
        width: 6,
        height: 300,
        dotSize: 12,
        min: 0,
        direction: 'vertical',
        max: 100,
        interval: 1,
        show: true,
        speed: .5,
        tooltipDir: 'top',
				bgStyle:
        {
  			"backgroundColor": "#fff",
  			"boxShadow": "inset 0.5px 0.5px 3px 1px rgba(0,0,0,.36)"
				},
				sliderStyle:
        {
    		"backgroundColor": "red"
  			},
      }
    }
  },
  methods: {
  	log (v) {
    	window.alert(v)
    }
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})
new Vue( {
  el: '#app_4',
  data () {
    return {
    	value: 0,
      options: {
        eventType: 'auto',
        width: 6,
        height: 300,
        dotSize: 12,
        min: 0,
        direction: 'vertical',
        max: 100,
        interval: 1,
        show: true,
        speed: .5,
        tooltipDir: 'top',
        bgStyle:
        {
  			"backgroundColor": "#fff",
  			"boxShadow": "inset 0.5px...