Q-Range issue when extending 'drag-only-range' functionality: values change, sliders won't move
-
I am trying to expand the ‘drag-only-range’ functionality on Q-Range. I want to keep a static distance between max and min only when the range exceeds that distance. And when one of the values is changed so that the range is less than the distance the drag-only-range mode is off. I wrote a simple function for that. The model values change as required, but the second label won’t move on the slider when I move the first one and that causes issues. However, when instead of dragging the slider label I change max/min values with the help of test Increment/Decrement buttons that use the same function to correct the distance between ranges, it works as intended! My codepen for this:
https://codepen.io/Solarwake/pen/QWjwVeEWhy so and how to fix that? A reactivity issue or something else with the way Vue watches value changes? I’ve been trying to change q-range model values with this.$set but the result is the same.