What is missing for the full operation of this slider?

Question

Vue.js

Hello everyone who is watching.
I've been tormented all day studying this view, I see that my design wants to work, but the slider developer component prevails over my watch.
jsfiddle.net
What can be done to make it work?
PS: It’s not an option to do it on a clean input, because there are a lot of styles to change, it’s easier to implement such a slider yourself on a diva.

Answer 1

Too complicated code in watcher. All that is needed here is to find the closest point to the current value, it is enough to calculate the absolute values ​​of the differences, and take the minimum.
In order for your code to work after changes inside the slider, you can try to wrap it in nextTick and add lazy synchronization when drag'n'drop'e .
Was it supposed to be like this ?