CODEWITHSUNDEEP
javascriptvuejs2vue-slider-component
Greg Ostry
Greg Ostry

Reputation: 1231

How to use vue-slider-component in Laravel 5.6

i would like to add a slider to my panel. I've insalled 

npm install vue-slider-component --save

and then i created a new component and regstried in app.js

In my Slider.vue component i added the startet template

<template>
  <div>
    <vue-slider ref="slider" v-bind="options" v-model="value"></vue-slider>
    <h3><small>Value: </small>{{ options.value }}</h3>
  </div>
</template>

and imported the vueSlider 

<script>
  import vueSlider from 'vue-slider-component'

  export default {
    components: {
      vueSlider
    },

    data() {
      return {
        options: {
          value: 5,
          width: 'auto',
          height: 6,
          direction: 'horizontal',
          dotSize: 16,
          eventType: 'auto',
          min: 5,
          max: 100,
          interval: 5,
          show: true,
        }
      }
    },
  }
</script>

I'm getting the the slider. Unfortunately i can't slide it and get immediately the maxValue on the start. Like in this picture enter image description here and thats it. It doesn't matter where i click it does nothing. When i would like to change the options like change the dotSize it also does nothing.

I noticed that when i open the console(F12) it's working perfectly.

The slider is wrped in a bootstrap 3 panel.

What do i'm missing ?

UPDATE 1:

i pulled the value outside the options now i get this:

enter image description here

Upvotes: 1

Views: 1204

Answers (1)

Mārcis P
Mārcis P

Reputation: 326

You should put options directly in the <vue-slider> as a properties. It can be dynamic if you add them in the data object.

<template>
  <div>
    <vue-slider 
      :value='value'
      width='auto'
      :height='6'
      direction='horizontal'
      :dotSize="16"
      eventType='auto'
      :min='5'
      :max='100'
      :interval='5'
      :show='true'
    />
  </div>
</template>

<script>
import vueSlider from 'vue-slider-component'    

export default {
  data: () => ({
    value: 5
  }),
  components: {
    vueSlider
  }
}
</script>

Upvotes: 1

Related Questions