Vue-slider-component: Load first component fails

[tarsil]

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:

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

Thanks,

[NightCatSama]

Is this the case? https://github.com/NightCatSama/vue-slider-component#exceptions

[tarsil]

Yes and I used the solution number 2 as suggested and nothing happens.

This:

using v-if instead of v-show or display: none.
use prop show to control display.
After the component appears, to call the refresh method.

I did all of this and nothing fixes the problem

[NightCatSama]

I am sorry, I have not used that framework, can not judge where the error caused.

It looks like the width of the table is reduced after the component is initialized.

You initialize the first piece of data is dynamically rendered?

[tarsil]

Yes, loads the data from the DB.

[NightCatSama]

@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
  })

[tarsil]

Even this one doesn't work. That was my 1st try

[NightCatSama]

I am sorry, I do not know what is the reason.

[sanjsharma]

I am having the same problem. Slider slides only after I resize.

[NightCatSama]

@sanjsharma Because the component is bound resize event to call the refresh method.

You just have to call the refresh method after the layout is modified, just as I commented on earlier.

[sanjsharma]

@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()
        })
      }

[ojczeo]

@NightCatSama this is nice solution: https://github.com/Akryum/vue-resize

[NightCatSama]

@ojczeo Thanks for your recommendation, but may not be able to solve the root cause, such as display: none, and left, top, and transform cannot be listened.

[schmich]

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());
  }
}

[NightCatSama]

It is no longer necessary to call refresh in the latest version.

[reiyszw]

It is no longer necessary to call refresh in the latest version.

Hi, could I ask what should we do instead of calling refresh to resize in v3??

[NightCatSama]

@hsoyier What do you want to refresh?