Can reset range slider in onChange event?
Question
Application Type
Mobile

Hello everyone,

I have the following problem. Please check it and if you have any idea, please let me know.
When change range slider, javascript confirm dialog will be displayed.
When click cancel, want to reset the range slider. Currently, slider does not reset.
Can I reset it ? If I can, let me know the solution.

Appreciate any answers.

Thanks and regards,
Zwe

Solution

Hi @Ozan Can ÇALI ,@Márcio Carvalho

Sorry for late reply.
Now the problem is solved. I wll share what I got when I researched this problem.
Outsystems uses onUISlider for range slider widget. With javascript, need to call onUISlider object and set or get value easily. If you want to check detail please check attached oml test file.

Thanks and Regards,
Zwe

TestRangeSlider.oml

Good to hear that you found a fix!

One thing I can suggest is that in JS, it's better to get the HTML element by name or class, or pass the Id dynamically instead of hard-coding it (b4-RangeSlider in your example), because it might change with each publish. Something like this:

HI @Ozan Can ÇALI
Thank you so much for your suggestion. I think your suggestion is proper.
I will fix it and publish again. 😊

Thanks and Regards,
Zwe

Hi Zwe, check this post.

You can call a Client Action in the "else" (not confirmed) block of your javascript confirm dialog, and in that Client Action you reset the value of the range slider.

Regards

Hi Ozan Cali,

Thank you so much for you reply.

Currently I try as your idea but it does not work properly.
Please check my flow and it match or not with your idea.

Thanks and regards,
Zwe


Hi Zwe,

Can you also send a simple oml where you recreate this piece of code? It seems ok from the flow but we need more detail to understand what's wrong.

Hi Ozan Cali,

Thank you so much for you reply.
Now I attached my oml file. Please check it and let me know what's wrong.

Thanks and regards,
Zwe

TestRangeSlider.oml

Check the oml file i have added a button to reset the range slider.

TestRangeSlider.oml

Just something to add, and I am not sure if this is happening on not. But would be great to have an option on the range slider to reset the values. As on the nouislider website, there is that option to do that.

https://refreshless.com/nouislider/slider-read-write/

I tried to use the reset in javascript but it got me an error because I need to do that on an object. On the clone, you can see they are using an object to set values. Wherewith that object would be possible to reset values.

Maybe, I dunno, it would be a great idea to include that, because on the component just with the object is possible to do that. Tell me something if I am wrong, if not it is a good idea to add.

Let me know what you think! And if is a good idea, and if is possible to do that on the component I will be more than happy to add that.

Kind Regards,

Márcio

Hi @Márcio Carvalho,

I think it's a very good idea. Actually the oml Zwe provided works halfway; I guess why it doesn't work is because when we change the SliderValue to 0, it internally calls the "OnChange" event again for some reason. So, our SliderOnChange handler is called again, which results in calling the confirm JS again. In the end, the confirm dialog is shown twice.

@Zwe Mann Oo I would like to know more about your use case, because it seems a bit odd to call JS confirm in the OnChange event of the slider. Normally, you would only assign some values/change text etc. in the OnChange handler, and there would be a submit button on the screen. You would do the validations or prompt dialogs on this submit. 

Solution

Hi @Ozan Can ÇALI ,@Márcio Carvalho

Sorry for late reply.
Now the problem is solved. I wll share what I got when I researched this problem.
Outsystems uses onUISlider for range slider widget. With javascript, need to call onUISlider object and set or get value easily. If you want to check detail please check attached oml test file.

Thanks and Regards,
Zwe

TestRangeSlider.oml

Good to hear that you found a fix!

One thing I can suggest is that in JS, it's better to get the HTML element by name or class, or pass the Id dynamically instead of hard-coding it (b4-RangeSlider in your example), because it might change with each publish. Something like this:

HI @Ozan Can ÇALI
Thank you so much for your suggestion. I think your suggestion is proper.
I will fix it and publish again. 😊

Thanks and Regards,
Zwe

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.