In case the Change event is used for updating the Value, the interactions of the Slider component will stop working. The issue stems from using the Value parameter to trigger the onchange.
The value does not change
The value should change. Change event should fire with the upcoming value and not the old one.
Could an additional event be exposed on the Slider control? (like OnDrag?)
Have noted that "ValueChanged" is fired every time the value parameter changes (after the user stops dragging the handle), but is it possible to expose the event & value of slider during drag?
This will allow the slider to be used like a search, for example; slide quickly through a large series of photos or data (without letting the mouse button go).
Or is there another way we could achieve this with this control?
When setting slider value by clicking on a position within slider the ValueChanged event does not always fire. In those cases the slider looks as if set to the correct value but the connected Value is not updated.
Unfortunately I could not find a reproducible pattern for this to happen. Sometimes it occurs on the first or second click but sometimes it takes many clicks for the error to occur again.
The problem sometimes also occurs if setting the value not by clicking on a position but by dragging the slider. In both cases (clicking on position and sliding) the GUI is updated before the ValueChanged event is fired. The error does not seem to occur if using the left/right buttons for setting a value. In this case the ValueChanged event is fired first and then the GUI is updated.
This error renders the Slider Component useless for us because the user can never be sure whether or not the value has been set correctly.
I have a situation where I need to be able to let the user divide a value by multiple points, and I'd like to be able to implement it as a multi-slider control. Here's a real world situation:
A company has 3 products they sell, and wants to model each different product financially. I want them to be able to drag the sliders representing each product's total portion of revenue for the company, so that the ratios always add up to 100%.
An example of this is at the bottom of the page here: https://nightcatsama.github.io/vue-slider-component/#/basics/process
Any chance this could be possible? Thanks!
The Slider Component only seems to work properly if the range is a multiple of 10.
works as expected. Same is true if Max is set to 20. But if Max is set to 7 or 9 or 11 it does not work. In those cases, clicking on the right arrow button does not do anything and after dragging the slider it magically moves back to 0. Clicking on a value only works every second time.