694
Views
6
Comments
[OutSystems UI] More settings on slider
Question
outsystems-ui
Reactive icon
Forge asset by OutSystems

Hi, 

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

Thank you.

UserImage.jpg
Davidk

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.

2020-12-07 13-36-58
Alexandre Santos
Champion

Hi!


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:

https://refreshless.com/nouislider/


Example using the code you mentioned before:



Hope this helps :)


Cheers!

UserImage.jpg
Davidk

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

2020-12-07 13-36-58
Alexandre Santos
Champion

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...

UserImage.jpg
Davidk

Nick,

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

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

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

2021-05-05 13-05-18
Mykola (Nick) Tkachenko

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

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