Vue-slider-component: VueSlider : Value auto set 0 after reload and cant change it.

Created on 27 Jul 2018 · 18Comments · Source: NightCatSama/vue-slider-component

For the first load, it works perfect. When I reload page again, the value and position looks just good. But when I click on slider, it moves to the min value of it, and then stuck there forever.
Only on my local, eddit fiddle works good

Source

HaoCao216

👍5

Most helpful comment

Calling the refresh method helped to work around this problem. In my case, the slider was in a box which changed its position (transform: translate change). I also used a timeout before refreshing the slider (refresh after the box transform transition finishes).

ssc-hrep3 on 2 Nov 2018

👍3

All 18 comments

Any errors?

NightCatSama on 27 Jul 2018

and no errors :(

HaoCao216 on 3 Aug 2018

I try to fix follow another issue, add " this.$nextTick(() => this.$refs.slider.map(slider => slider.refresh())) ", refresh slider after reload the page. But on first click, slider scroll to 0 value before it work
p/s: It work on mobile screen.

HaoCao216 on 3 Aug 2018

I can't tell what went wrong, can you reproduce it in the online example?

NightCatSama on 3 Aug 2018

Same problem here, gets stuck at top left of the slider when using :min and :max props, while holding max value.

AusPrinzip on 28 Aug 2018

Is it possible that the exception is in the document, if not, can you restore the bug in the online example?

NightCatSama on 28 Aug 2018

@HaoCao216 @AusPrinzip
我有同样的问题，如果父元素没有设置v-show属性，就完美显示，如果父元素设置了v-show为false，那么就会发生这个问题：dot在mix的位置，且不能拖动，拖动会造成绑定的数值直接从mix到max，dot不会产生位移，没有动画。
后面我发现slider本身也有一个show属性，我尝试显式设置它和父级元素的v-show一致，这个问题就解决了。我猜可能是slider内部的v-show和外部的v-show产生了冲突，没仔细看代码，你们可以试试看。
translate the above words
i have same problem, whenever i render slider first time in page is done. but if i set v-show: "false" in slider , its no work , just can drag mix direct to max have no animation.
i find the resolve is set the show prop. if you want show , explicit set like this :show="true" and vice set false. you can try it .

@NightCatSama maybe the source of issue is in https://github.com/NightCatSama/vue-slider-component/blob/c1e7c634bb054997c1e62ce4595bc81046d23005/src/vue2-slider.vue#L1023

SpadeGod on 30 Sep 2018

I had same issue, once i click on the tooltip it's scrolls to the 0 and i cant drug it anymore. No errors in the console and the slider loads on my page but after first click it's slides to the 0 and i can't drag it. Anyways, this link(https://github.com/NightCatSama/vue-slider-component#exceptions) helped me to keep going. I also added a setTimeout before i call the refresh and the slider is draggable after this fix.