[OutSystems UI] More settings on slider

Forge Component
Published on 1 Jun (5 days ago) by OutSystems R&D
84 votes
Published on 1 Jun (5 days ago) by OutSystems R&D


It would be great to have more settings (tooltips, direction etc.) on the range slider widgets.

Thank you.

noUiSlider is the library implemented for the Slider Widget.  Unfortunately, only part of the library made it into the Slider properties.

If you could get the Slider Object from OutSystems, then enhancing your Slider would be really easy.  But I don't know how to get the Object.

Since OS has implemented noUiSlider.create, you could create your own slider and not use the Widget.  It's a small pain, but you gain everything you're asking for.  E.g. this Javascript code creates a Slider with tooltips and going rtl... then the gets the current Slider values... and then sets up a Change event.

var slider = document.getElementById('slider');

var newSlider = noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
tooltips: true,
direction: 'rtl'

var vals = newSlider.get();

newSlider.on('change', function(){
    //do something because the slider changed values

Again, if we could somehow get the Object that Outsystems creates for the Widget... then I believe the Slider could be easily changed.


I believe you have not seen the AdvancedFormat parameter:

With this parameter, you can customize the RangeSlider the way you want (in terms of functionality) and then you can style it with CSS, following the documentation of the plugin:


Example using the code you mentioned before:

Hope this helps :)


AdvancedFormat, which is excellent, is available in the Web implementation of the Slider Widget... but not in the Mobile Implementation.

Oh, sorry, didn't saw the "Mobile" on the title... My bad.

In that case we will need to wait until the Silk UI implements that in Mobile too...


Here is a solution to getting access to more options...


Overall, the rendered Slider Widget must first be destroyed... and then re-created.

As a workaround I copied the slider widget from silk ui mobile to my espace and just add options on the js code.