16
Views
3
Comments
Solved
Range slider customization
Application Type
Traditional Web
Service Studio Version
11.10.6 (Build 37198)

Hi all, 

I am having an issue with how to customize a range slider component from the Outsystems UI so that it could match the design. I have attached the image of how I want the slider to look.

Rangeslider.PNG

Rank: #56
Solution

Hi Baden,


You need some customizations at different levels to achieve this.

To achieve the currency formatting you have on numbers, you can add the following to the AdvancedFormat property of the Slider, like adding the space on the thousands and the "R" as a prefix:

{
    pips: {format: wNumb({thousand: ' ', prefix: 'R'})}
 }


For the color of the widget, you can add that with simple CSS, change below the color to the one you want:

.range-slider .noUi-connect {
    background-color: green;
}


OML in attachment with an example.

For the buttons, you can include them on the side of each slider and update the variable value binded to the slider.


Regards,
João

TestSlider.oml

Rank: #1557

Hi I am really struggling with adding and customizing those two buttons on the side of the slider. You have any solution on how I can go about this?

Rank: #506

Hello Baden, what did you tried already?

The best solution should be copy the code from the original slider, and create a block with that code and with the changes that you need. You should need some css to customize it. 

Thanks, 

Camila

Rank: #56
Solution

Hi Baden,


You need some customizations at different levels to achieve this.

To achieve the currency formatting you have on numbers, you can add the following to the AdvancedFormat property of the Slider, like adding the space on the thousands and the "R" as a prefix:

{
    pips: {format: wNumb({thousand: ' ', prefix: 'R'})}
 }


For the color of the widget, you can add that with simple CSS, change below the color to the one you want:

.range-slider .noUi-connect {
    background-color: green;
}


OML in attachment with an example.

For the buttons, you can include them on the side of each slider and update the variable value binded to the slider.


Regards,
João

TestSlider.oml

Rank: #1557

Hi I am really struggling with adding and customizing those two buttons on the side of the slider. You have any solution on how I can go about this?