wNumb formatting stops noUiSlider price slider working

Question

I have a price slider on my site and price range is displayed as £0.0 - £5,000,000.0 with a trailing zero.

I have change the number format code from:

    format: wNumb({
            decimals: 1
        })

to:

    format: wNumb({
            decimals: 0,
            thousand: ','
        })

Now this price is being displayed as £ 0 - £ 5,000,000 which is what I want.

The problem now is when doing a search the price in the url is displaying the ascii encoding for a comma %2C and it's not filtering the search results

    adv_filter_price_min=0&adv_filter_price_max=5%2C000%2C000

How can I get it so the ascii encoding is not used in the url? eg:

    adv_filter_price_min=0&adv_filter_price_max=5000000

Many Thanks

S

Full Code

var rangeslider = jQuery('.rangeslider');
var rangecontainer = rangeslider.parent('.rangeslidercontainer');
var txtlowprice = rangecontainer.children('.adv_filter_price_min');
var txthiprice = rangecontainer.children('.adv_filter_price_max');
var spnlowprice = rangecontainer.find('.text_price_min');
var spnhiprice = rangecontainer.find('.text_price_max');
var defminprice = Number(interfeis_var.search_minprice);
var defmaxprice = Number(interfeis_var.search_maxprice);
var hdnminprice = txtlowprice;
var hdnmaxprice = txthiprice;
var minprice = Number(hdnminprice.val());
var maxprice = Number(hdnmaxprice.val());

if(rangeslider.length){
    rangeslider.noUiSlider({
        start: [ minprice, maxprice ],
        step: 10000,
        range: {
            'min': defminprice,
            'max': defmaxprice
        },
        connect: true,
        // Set some default formatting options.
        // These options will be applied to any Link
        // that doesn't overwrite these values.
        format: wNumb({
            decimals: 0
        })
    });

    rangeslider.Link('lower').to(txtlowprice);
    rangeslider.Link('upper').to(txthiprice);
    rangeslider.Link('lower').to(spnlowprice, setFormat);
    rangeslider.Link('upper').to(spnhiprice, setFormat);

    }

You seem to be using a noUiSlider version that is a couple years old. Upgrading gets you a couple API features that make this issue a lot easier to solve. — Lg102

Sahil Sahil · Accepted Answer · 2018-06-15T06:38:23

You are using wNumb to format the input passed to slider, so when you try to fetch data back from slider, it returns you formatted inputs.

In Your case, when you formatted it using thousand: ',' , it make a number 50000 to 50,000 (Notice the comma). So when you try to fetch it back from slider it returns you 50,000 instead of 50000.

So I suggest you to do following to unformat the numbers back.

Create wnumb object to pass it to slider

var thousand_format = wNumb({
            decimals: 0,
            thousand: ','
});

When you get input back from slider after using slider unformat it using thousand_format object using wnumb's from method.

var unformat_input = thousand_format.from( '50,000' ); // it will return 50000

Same unformat_input you use to set in url. wNumb causes slider to not work properly as wNumb requires numbers(50000) and after your first usage you must be passing it string(50,000).I hope by unformating it should fix the issue.

Know more about wNumb here

wNumb formatting stops noUiSlider price slider working

1 Answers