Add event to SliderField

[LauGroupie95]

Hi @veej and @gabro,
is there the chance to add an event such as onMouseUp() to the SliderField?
At the moment, the onChange method is provided, but it runs everytime the slider value changes. This is a problem if I want to call a function only after the user has set the value and have released the mouse.
Maybe it's already possible to do that and it's simply my fault, so please, if you can help me it would be great :)

Thank you in advance

[veej]

Hi @LauGroupie95, I can confirm we don't have the event you're asking. Can I ask you more details about your use case, so to better understand your need?
If it's just a problem of triggering an heavy computation (e.g. a backend call) too many times while the user is sliding, you may consider to debounce your onChange handler using something like https://www.geeksforgeeks.org/lodash-_-debounce-method/

[LauGroupie95]

Yeah, that's exactly what I have to do.
I have a slider that, let's say, goes from 0 to 65535 and everytime the slider changes value, a backend function is called in order to process an image and modify its brightness according to the value got from the frontend.
Since this operation may take more or less 1-3 seconds (a lot!), it's insane to call the backend function at every change.. it would be better to call the function only after the mouse release.
I'll try with the lodash method you suggested, thanks!

[LauGroupie95]

Hi @gabro and @veej ,
just to share the current situation and "refresh this discussion": at the moment the workaround we adopted works, however it has a non-desired behaviour when the slider changes slowly.
Let me explain better: if I set 500ms in the debounce function and I move the slider rapidly, the associated action runs after the 500ms and that's ok. While, if I move the slider slowly, after 500ms the associated action runs even if I'm not finished with the slider change!
Obviously, using a higher delay wouldn't be acceptable because I can't wait a lot to trigger the action.
For that reason, I kindly ask you again to take into consideration this feature for the next Bento's releases :)
Thank you

[gabro]

Hi @LauGroupie95, ok, it makes sense. We'll come up with a good API for this use case and schedule it for the next release!

[gabro]

Hi @LauGroupie95 I've opened a PR (#454) for this. Can you check the proposed API works for your use-case? Here's a demo you can play with: https://bento-playroom-oxnqodimd-buildo1.vercel.app/#?code=N4Igxg9gJgpiBcJgApkEoAEBeAfB4AOgHYYaREDOALhgNoBuAhgDYCuMANBhEQMIAWjIgHMYAXWwYASjEZgqAOlYUYAZSqMqMZACYAHGgDcxUuWp0AlhQAiAJ0bDhFkVxVUAkjfuPnwiVmlZeSUVdU1tADMWFSMTDFsYKlZbEmQ40gAed0pEjAoABzkYLGAdABYAXxx00gwM1WYLWFsAMQsYZiga2owqAE984oIQCl9mGGHu2qY2YuAZ9gqp0h4BIVES1cERGCWSHtqeOwcwpIo1nZK3T2OfET2DjAB6av2ejIAhaD68iwAvIYgAC2MCgFlYQOGOGAVluThEGAA-BhhnDfMMMPAUSAAHIQGhQbzw4TDCoZJ5fKB9V7vJ7ZNw0jCxIgVNDoPYgCpAA

[LauGroupie95]

Hi, yeah it seems perfect. It works with both click and drag and in my specific case I suppose it'd be sufficient to check whether the state is dragging or not to send the backend request. Thank you!

[gabro]

Hi @LauGroupie95, we actually updated the final implementation a bit. It's a bit less powerful but it has a cleaner implementation and it should cover your use case regardless. Can you check it here?

https://bento-playroom-git-slider-onmouse-buildo1.vercel.app/#?code=N4Igxg9gJgpiBcJgApkEoAEBeAfB4AOgHYYaREDOALhgNoBuAhgDYCuMANBhEQMIAWjIgHMYAXWwYASjEZgqAOlYUYAZSqMqMZACYAHGgDcxUuWp1YzRgE8YUAGot2XFVQAiMK7YdPxkmXKKymoaWshMbDBGJhgATjBUrLEkyDGkADwAkpQJGBQADnIwWMA6ACwAvjhppBjp6nIA1nmFYMXAAIwAbFU1tXWqzACWsLEAYkOeUH39GFTW%2BcUEIBRDIswwyzP9EewluzAV27U8AkKiJaeCIofHpFfnMACiRFAlrh5edo6RRySzpAA9NV-gD0gAhaDWPJDABeSxAAFs7ENWIjliCAf0ACr8IYUDAHDAAdyGzGYGFY%2BSgmhgJP4MBIUFijGEwjWwgwjKgFHg%2BEsNm%2Bvj%2BWLqgMhUGsmNm6UBDTAjWlGUB2Vc0uiRAqaHQfxAFSAA

Demo:

[LauGroupie95]

Hi @gabro, It sounds great!