Hi,

I'm trying to refresh a Range slider in a Web App ( https://success.outsystems.com/Documentation/SILK_UI_Framework/03_Building_UI_Through_Pattern_Composition/Using_Silk_UI_Patterns/RangeSlider_Pattern) when I change a value in an input box. 

The problem is that range slider only has inicial, min and max value and VALUE parameters. Changing the inicial value doesn't work because as the name says, it is the initial value and not the current value.

Does anyone know how to change the current value so that the slider is automatically in the correct position?


Notice that I have already been testing some javascript properties like aria-valuenow but this does not change the position of the slider.


Regards,

NC


Nuno Coelho wrote:

Hi,

I'm trying to refresh a Range slider in a Web App ( https://success.outsystems.com/Documentation/SILK_UI_Framework/03_Building_UI_Through_Pattern_Composition/Using_Silk_UI_Patterns/RangeSlider_Pattern) when I change a value in an input box. 

The problem is that range slider only has inicial, min and max value and VALUE parameters. Changing the inicial value doesn't work because as the name says, it is the initial value and not the current value.

Does anyone know how to change the current value so that the slider is automatically in the correct position?


Notice that I have already been testing some javascript properties like aria-valuenow but this does not change the position of the slider.


Regards,

NC



You may assign the initial value to a variable so when the variable value changes, the position of the slider changes as well after an ajax refresh.

As I said before, the initial value does not change the current value.This solution does not solve the problem.


Additionally, there is no AjaxRefresh in REACT. 

Sorry I overlooked that this was in REACT. I tried the RangeSlider on REACT and there might be a bug cause it doesn't work as expected even if I enclosed it in a block. I tried to use the old and being deprecated range slider (see screenshot below) and it works well. When I change the input it refreshes the slider. You may test it here.

https://gracetamayocloud.outsystemscloud.com/test/Screen1?_ts=637170950383039031



Solution

Hi Nuno,

Take a look at the official documentation: https://refreshless.com/nouislider/

Specifically, with https://refreshless.com/nouislider/slider-read-write/ you should be able to set the value via javascript by getting the proper DOM element and using the function "set".

Good luck.

Solution

Hi Rui,

Yes, I tried what you said and it worked. Thanks.