Hi,

Could anyone tell me how to prevent the user from changing the values on a slider? (Reactive web app)

Or how to reset the slider with the On change action.

Kind regards,
Glenn

Hi Glenn,

please check the follow link, and tell me if this help you: RangeSliderInterval Pattern


Cheers,

Nuno Verdasca

Nuno Miguel Verdasca wrote:

Hi Glenn,

please check the follow link, and tell me if this help you: RangeSliderInterval Pattern


Cheers,

Nuno Verdasca

Hi Nuno,

I'm using https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Mobile_Patterns/RangeSlider_Pattern

rather than the one with interval.

The issue remains that my user is able to change the value of the slider which we don't want them to be able to in this particular screen.

Kind regards,
Glenn


I don't know if I understand what you want, so I ask you to help me understand better.


Do you want to have no right value range? That the value be fixed? If this is the case, the minimum and the maximum must be equal. But I think this is not your question. Can you explain the case scenario better?

Cheers,

Nuno Verdasca

Nuno Miguel Verdasca wrote:

I don't know if I understand what you want, so I ask you to help me understand better.


Do you want to have no right value range? That the value be fixed? If this is the case, the minimum and the maximum must be equal. But I think this is not your question. Can you explain the case scenario better?

Cheers,

Nuno Verdasca

The case is as follows:

A user uses a range slider to select a value at screen 1 together with some more input fields.
After pressing a button the inputs are saved in a record and the user is redirected to screen 2 where the saved inputs are shown for the user to verify if they are correct. On this screen the user is not allowed to edit anything.

This includes the range slider showing the previously selected value.

My question is, how do I prevent the user from changing the slider value at screen 2?

Regards,
Glenn


Solution

Hello,

Outsystems uses the NoUISlider (https://refreshless.com/nouislider/). 

You can change the RangeSlider like in my .oml solution (attached).

1. Clone the RangeSlider widget;

2. Add an input called IsDisable;

3. Change the OnReady and OnParametersChange like in the image below. You need to add that Javascript snippet to disable the slider.


$parameters.SliderObj.setAttribute('disabled', true);


Solution

João Lopes wrote:

Hello,

Outsystems uses the NoUISlider (https://refreshless.com/nouislider/). 

You can change the RangeSlider like in my .oml solution (attached).

1. Clone the RangeSlider widget;

2. Add an input called IsDisable;

3. Change the OnReady and OnParametersChange like in the image below. You need to add that Javascript snippet to disable the slider.


$parameters.SliderObj.setAttribute('disabled', true);


Hi João Lopes

Thank you for your help!

It works now as intended.

Kind regards,
Glenn


Hello glenn michiels and João Lopes.

You don't need to clone the pattern to have this working.
Remember that, if you do so, any updates to the OutSystems UI framework won't be reflected on this pattern.

You can add a javascript node to the Screen's OnReady event, like so:

There's an example attached.


Hope this helps.

Cheers.