[Silk UI Web] [Silk UI Web] Rangeslider Formatting
silk-ui-web
Forge component by OutSystems R&D

I am using the range slider in my web app, but need the numbers displayed in currency formatting, i.e. $ 100,000.

The advanced formatting options as defined here does not seem to work.

Has anyone had a similar use case and were you successful in displaying the numbers as currency?


mvp_badge
MVP

The advanced formatting I am using is this:

"{
    format: {
            to: function (value) {
                // Create our number formatter.
                var formatter = new Intl.NumberFormat('en-US', {
                  style: 'currency',
                  currency: 'USD',
                  minimumFractionDigits: 0,
                  // the default value for minimumFractionDigits depends on the currency
                  // and is usually already 2
                });

                var newValue = formatter.format(value);
                //return newValue + ',-';
                console.log(newValue);
                return newValue;
            },
            from: function (value) {
                // Create our number formatter.
                var formatter = new Intl.NumberFormat('en-US', {
                  style: 'currency',
                  currency: 'USD',
                  minimumFractionDigits: 0,
                  // the default value for minimumFractionDigits depends on the currency
                  // and is usually already 2
                });

                var newValue = formatter.format(value);
                //return newValue.replace(',-', '');
                console.log(newValue);
                return newValue;
            }
        }
}"


In the console log, I do see the values formatted correctly. However, on the screen, I get NaN instead of the formatted text displayed.

I understand that this means the value the control is expecting to display should be an integer. How then do I get it to display a formatted value?

I am currently using it and had a similar question to you but instead I am trying to put text underneath I did manage to find some documentation for your issue if you are still having it (I know it's been a while since you posted haha) 


https://refreshless.com/nouislider/number-formatting/

Hi Hanno,

Recently I tried the same, for formatting the range slider values as currency. In the Advanced Format got to apply this code and it worked.

"{pips: 
{format: wNumb(
{decimals: 0, 
prefix: '$',
thousand: ','})
}}"

For More Info refer this URL : https://refreshless.com/wnumb/

RangeSliderFormat.PNG

You can use this simple CSS to add content before the RangeSlider values. Add this CSS in your screen where you are using the Range Slider.

.range-slider-input1:before {
content:'$'}

.range-slider-input2:before {
content:'$'}
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.