vue-slider-component: Load first component fails

Hi,

I’m trying to use this component but when I first load the slider, the first line doesn’t use the width properly. The slider is only “fixed”, for instance if I resize my window or if open an inspect. This only happens in 1 first slider, as I have a function to add new line, each line contains a slider, besides the first one, the rest is automatically fine.

JS:

components: {
        'vueSlider': window['vue-slider-component']
    },

HTML:

<td class="text-center">
     <vue-slider ref="slider" v-model="rule.value" :options="options"></vue-slider>
</td>

An example of what I’m talking about:

screenshot from 2018-01-24 18-05-24

Is this a bug? The HTML/JS framework that I’m using is Foundation 6

Thanks,

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 16 (8 by maintainers)

Most upvoted comments

@NightCatSama I am calling the vue-slider inside bootstrap collapse where it does not work but it works outside the collapse block. But, calling refresh inside updated() hook solved it. Thanks.

      updated() {
        this.$nextTick(function () {
          this.$refs.slider.refresh()
        })
      }

sanjsharma on Feb 8, 2018

In case it helps others: I had a long-running animated transition with a dynamic list of sliders. I had to wait until the transition was complete (afterEnter) before calling refresh.

Rough example:

<transition name="slide-left" @afterEnter="afterEnter">
  <div v-for="item in items">
    <p>{{ item.title }}</p>
    <vue-slider ref="sliders" :key="item.id" v-model="item.score"></vue-slider>
  </div>
</transition>

methods: {
  afterEnter() {
    this.$refs.sliders.forEach(s => s.refresh());
  }
}

schmich on Apr 5, 2018

@tiagoarasilva Maybe you can try adding this code after loading the data.

  this.data = res.data // simulate loads the data
  this.$nextTick(() => {
    this.$refs.slider.refresh() // refresh the component
  })

NightCatSama on Feb 2, 2018