jQuery slider ignore comma and dots

Question

So im working on this ecommerce, in which i am using jQuery slider. The products have both dots, and commas in their price. How do i make the slider ignore specific characters like the dot? so that i.e. 1.900,00 will be read as 1900,00?

This is my js code

function showProducts(minPrice, maxPrice) {
    $(".product_price").parent().hide();
    $(".product_price").filter(function () {
        var x = $(this).clone();
        $('span', x).remove();
        var price = parseInt($(x).text(), 10);
        return price >= minPrice && price <= maxPrice;
    }).parent().show();
}

$(function () {

    var maxValue = 0;

    $('div.product_price').each(function (index) {
        var price = $(this).contents().filter(function () {
            return this.nodeType === 3;
        }).text();
        if (parseInt(price, 10) > maxValue) {
            maxValue = parseInt(price, 10);
        }
    });

    var minValue = 0;

    $('div.product_price').each(function (index) {
        var price = $(this).contents().filter(function () {
            return this.nodeType === 3;
        }).text();
        if (parseInt(price, 10) < minValue) {
            minValue = parseInt(price, 10);
        }
    });

    var options = {
        range: true,
        min: minValue,
        max: maxValue,
        values: [minValue, maxValue],
        slide: function (event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#range_amount").val("kr" + min + " - kr" + max);
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#range_amount").val("kr" + min + " - kr" + max);

    showProducts(min, max);
});

I setup a jsFiddle

Answer 1

Use this code and it will work. I have tested it on JSFiddle as well.

$(".product_price").filter(function () {
    var x = $(this).clone();
    $('span', x).remove();
//This code is edited
        var priceText = $(x).text().replace(".","");
        var price = parseInt(priceText, 10);
//Editing complete
    return price >= minPrice && price <= maxPrice;
}).parent().show();

Cheers! :)

****************************Adding the updated code for other users*******************

function showProducts(minPrice, maxPrice) {
    $(".product_price").parent().hide();
    $(".product_price").filter(function () {
        var x = $(this).clone();
        $('span', x).remove();
        var priceText = $(x).text().replace(".","");
        var price = parseInt(priceText, 10);
        return price >= minPrice && price <= maxPrice;
    }).parent().show();
}

$(function () {

    var maxValue = 0;

    $('div.product_price').each(function (index) {
        var price = $(this).contents().filter(function () {
            return this.nodeType === 3;
        }).text();
        var priceText = price.replace(".","");
        if (parseInt(priceText, 10) > maxValue) {
            maxValue = parseInt(priceText, 10);
        }
    });

    var minValue = 0;

    $('div.product_price').each(function (index) {
        var price = $(this).contents().filter(function () {
            return this.nodeType === 3;
        }).text();
         var priceText = price.replace(".","");
        if (parseInt(priceText, 10) < minValue) {
            minValue = parseInt(priceText, 10);
        }
    });


    var options = {
        range: true,
        min: minValue,
        max: maxValue,
        values: [minValue, maxValue],
        slide: function (event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#range_amount").val("kr" + min + " - kr" + max);
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#range_amount").val("kr" + min + " - kr" + max);

    showProducts(min, max);
});

Answer 2

i am not sure but you can try this and if you have query then just ask in comment

function showProducts(minPrice, maxPrice) {
        $(".product_price").parent().hide();
        $(".product_price").filter(function () {

            var x = $(this).clone();
            $('span', x).remove();
            var price = parseInt($(x).text().replace('.', '').replace(',',''), 10);
            return price >= minPrice && price <= maxPrice;
        }).parent().show();
    }

Answer 3

Remove the dots from the price string:

var price = $(this).contents().filter(function () {
    return this.nodeType === 3;
}).text().replace('.','');