Log in to AnswerLog in to Follow
UserImage.jpg
Zwe Mann Oo
72Views
13Comments
Solved
Can reset range slider in onChange event?
Question
Mobile
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

0
0
31 Aug 2021
UserImage.jpg
Zwe Mann Oo
Solution

Hello Brian Teo,

In my case, I get the slider object by ClassName(Default class name is [noUi-target] .
When I try with get by ID, it's not work.
And the object will be return in array.
Please ref the follow code.

var slider = document.getElementsByClassName('noUi-target');
slider[0].noUiSlider.set($parameters.Val);

Hope it will be solved. ^_^

Thanks and Regards,
Zwe Mann

See solution in context
1
0
05 Jul 2022

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

1
0
31 Aug 2021

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


0
0
31 Aug 2021

Replying to Zwe Mann Oo's comment on 31 Aug 2021 11:45:08

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.

1
0
31 Aug 2021

Replying to Ozan Cali's comment on 31 Aug 2021 12:19:20

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
0
0
31 Aug 2021

Replying to Zwe Mann Oo's comment on 31 Aug 2021 12:26:27

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

TestRangeSlider.oml
0
0
01 Sep 2021

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

1
0
31 Aug 2021

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. 

1
0
31 Aug 2021

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
1
0
08 Sep 2021

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:

1
0
08 Sep 2021

Replying to Ozan Can ÇALI's comment on 08 Sep 2021 07:52:36

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

1
0
08 Sep 2021

Hi,

I am running on OS Version 11.10.4 (Build 1554), somehow I am not able to use the same code. But i manage to resolve the issue by appending the child dom element. You may refer to the below for my solution:


For those who are familiar with HTML and Javascript, I believe we need to target the actual dom that has the noUiSlider function which is as below:


Hope this helps.

Regards,

Brian

1
0
05 Jul 2022
UserImage.jpg
Zwe Mann Oo
Solution

Hello Brian Teo,

In my case, I get the slider object by ClassName(Default class name is [noUi-target] .
When I try with get by ID, it's not work.
And the object will be return in array.
Please ref the follow code.

var slider = document.getElementsByClassName('noUi-target');
slider[0].noUiSlider.set($parameters.Val);

Hope it will be solved. ^_^

Thanks and Regards,
Zwe Mann

1
0
05 Jul 2022

You saved my life! Thanks!

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