Add debounce option for emitting input event or disable animation

[bartoszmagier]

When the user clicks on the slider every step between the values is animated and the value is emitted, which can sometimes slow down the browser (e.g. if there is validation and slider has a large min/max range, then there are a lot of steps and animation can be long).

Can you add an option for disabling the animation or debounce emitting the input event (so the animation of the knob will be played, but the value will update at the end, just once)

[Saymon-biz]

Good idea, it will be useful in some cases

[Jeremy-F]

Hello @bartoszmagier ,

I had the same problem.
The only solution I found without having to fork the project was to perform the installation by hand, and modify the event functions.

let vueCircleSlider = require("vue-circle-slider").CircleSlider;
vueCircleSlider.methods.handleClick = () => {};
vueCircleSlider.methods.handleMouseDown = () => {};
vueCircleSlider.methods.handleMouseUp = () => {};
vueCircleSlider.methods.handleTouchMove = () => {};
vueCircleSlider.methods.handleWindowMouseMove = () => {};

....

componenents: {
    'VueCircleSlider': vueCircleSlider
}

I'm not saying it's a good solution, as a better solution would be a pull request with a "clickable" or "fixed" property and conditions.

[admicaa]

Mmmmmm, I think that I handled this problem and made a pull request, but he can't see it

[d4rkmen]

Hi, this option is mandatory for controls. But not deboucing (like send onchange event onse a second). Need to add lazy option: send onchange event (and/or v-model setter) at the end of update the slider and all the animation steps. Thanks