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

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