[OutSystems UI Web] Range Slider

Forge Component
(45)
Published on 14 Feb (8 days ago) by OutSystems R&D
45 votes
Published on 14 Feb (8 days ago) by OutSystems R&D

Hi, I'm trying to disable the Range Slider in OutSystems UI Web but I'm not finding an easy way to this and running some javascript on 'dom is ready' is pointless because the HTML is generated. 

I don't want to clone the component just for this because.


Thanks

Solution

João Franco wrote:

Hi, I'm trying to disable the Range Slider in OutSystems UI Web but I'm not finding an easy way to this and running some javascript on 'dom is ready' is pointless because the HTML is generated. 

I don't want to clone the component just for this because.


Thanks

Hi João!

Can you give a look on this post and test it?

 https://www.outsystems.com/forums/discussion/33792/silk-ui-mobile-mobile-getting-a-widget-object/

Based on this solution I found this documentation:

https://refreshless.com/nouislider/more/

I try to run this code in the console of the browser:
var sd = document.getElementById("b3-b2-Slider");
sd.setAttribute('disabled', true);


I test it here and works :)



Hope it helps!

BR,

Luis


Solution

You can destroy the slider object by calling object.noUiSlider.destroy();

The slider object you've to fetch using hardcoded id.



Going to give it a try next thing tomorrow. Thanks Swatantra and Luís. 

Swatantra Kumar wrote:

You can destroy the slider object by calling object.noUiSlider.destroy();

The slider object you've to fetch using hardcoded id.



I tested the method destroy and with that the slider is hidden, not disabled


Hi João ,

Try to go through with this discussion.

If you are trying to prevent user from changing the values on a slider by disabling it, this may help you.

Regards

Seema



Hi João,


In the latest version of OutSystems UI Web (1.8.0), we released a new version of the Range Slider. It comes with a new parameter - IsDisabled - that solves your use case.


Best regards,

Bernardo Cardoso

Hi all,

Thanks for the feedback and help. I don't know if it's related but because our OutSystems UI Web is in an older version I couldn't apply what you suggested. My Platform Server is 11.0.212.0 and my OutSystems UI is 1.7.6.

Luís Cardoso wrote:

João Franco wrote:

Hi, I'm trying to disable the Range Slider in OutSystems UI Web but I'm not finding an easy way to this and running some javascript on 'dom is ready' is pointless because the HTML is generated. 

I don't want to clone the component just for this because.


Thanks

Hi João!

Can you give a look on this post and test it?

 https://www.outsystems.com/forums/discussion/33792/silk-ui-mobile-mobile-getting-a-widget-object/

Based on this solution I found this documentation:

https://refreshless.com/nouislider/more/

I try to run this code in the console of the browser:
var sd = document.getElementById("b3-b2-Slider");
sd.setAttribute('disabled', true);


I test it here and works :)



Hope it helps!

BR,

Luis


  1. The class 'b3-b2-Slider' doesn't exist in my DOM, probably because I'm dealing with an older version;
  2. When I run any script on dom ready or something, because the slider wasn't created yet, I can't access the element in DOM. I was hoping to have an event that's triggered when the object is created.

What I did until we upgrade:

SyntaxEditor Code Snippet

"$(document).ready(function() {
    setTimeout(function() { 
        document.getElementsByClassName('noUi-origin')[0].setAttribute('disabled',true);
    }, 1);
});"

I prefer this approach wrapped in a web block instead of a button that is clicked by action and so one. OutSystems UI 1.8.0 already has an IsDisabled option so this will no longer be an issue after the update.


Thank you all

João Franco wrote:

  1. The class 'b3-b2-Slider' doesn't exist in my DOM, probably because I'm dealing with an older version;

Hi João!

Just a quick note. "b3-b2-Slider" is not a class. It's a dynamic ID generated by the platform. 

You can use it in ServiceStudio if you link to the "RuntimeId" of your slider block

Alexandre Santos wrote:

João Franco wrote:

  1. The class 'b3-b2-Slider' doesn't exist in my DOM, probably because I'm dealing with an older version;

Hi João!

Just a quick note. "b3-b2-Slider" is not a class. It's a dynamic ID generated by the platform. 

You can use it in ServiceStudio if you link to the "RuntimeId" of your slider block

Hi!

Yes, like Alexandre said, b3-b2-Slider is just an example (is the id of the slider in my case).


BR,

Luis


Luís Cardoso wrote:

Alexandre Santos wrote:

João Franco wrote:

  1. The class 'b3-b2-Slider' doesn't exist in my DOM, probably because I'm dealing with an older version;

Hi João!

Just a quick note. "b3-b2-Slider" is not a class. It's a dynamic ID generated by the platform. 

You can use it in ServiceStudio if you link to the "RuntimeId" of your slider block

Hi!

Yes, like Alexandre said, b3-b2-Slider is just an example (is the id of the slider in my case).


BR,

Luis


Well, I understand but we don't have access to the RuntimeId of the element that needs to be disabled. The element which I have access to is just a container. 

João Franco wrote:

Well, I understand but we don't have access to the RuntimeId of the element that needs to be disabled. The element which I have access to is just a container. 

Hi João. If you are working with an expression in the OutSystems screen, you can do something like this:

"document.getElementById('"+ContainerName.Id+"').querySelector('.noUi-origin').setAttribute('disabled',true);"

Hi guys, as Bernardo said, this is now a simple parameter on the UI pattern, no need get your hands dirty in coding the feature :p

Cheers


Bernardo Cardoso wrote:

Hi João,


In the latest version of OutSystems UI Web (1.8.0), we released a new version of the Range Slider. It comes with a new parameter - IsDisabled - that solves your use case.


Best regards,

Bernardo Cardoso



Dinis Carvalho wrote:

Hi guys, as Bernardo said, this is now a simple parameter on the UI pattern, no need get your hands dirty in coding the feature :p

Cheers


Bernardo Cardoso wrote:

Hi João,


In the latest version of OutSystems UI Web (1.8.0), we released a new version of the Range Slider. It comes with a new parameter - IsDisabled - that solves your use case.


Best regards,

Bernardo Cardoso



I know Dinis, but as I mentioned above, the platform server version is below the requirements for the latest update,


Oh, understood, João :)

Which PS version are you currently on?

Dinis Carvalho wrote:

Oh, understood, João :)

Which PS version are you currently on?

Right now I'm using the Platform Server Version 11.0.212.0. For now, I will maintain the javascript in a web bock isolated with a comment, so when we update the Platform Server I know that code is no longer needed. 

Hi João!


We can also make it disable by applying CSS 

pointer-events: none;

 to the container which encloses the range slider.

Its working fine!