Multiple sliders "overwrite" each other

[SchmidtDEN]

Hi Guys

Sorry if this has come up many times before, but I can't seem to find anything about this anywhere. I have added two sliders and all works except that they "overwrite" each other and I can't seem to figure out how to check both sliders at the same time.

I "understand" why it just adds the class even though the "first" slider has removed the class. But how do I get both sliders to check if the other slider has hidden the item, so it will not show up again. This is what I have now:

`// Range slider Size // --------------------------------------

    $("#range-size-slider").ionRangeSlider({
        type: "double",
        min: 0,
        max: 300,
        from: 0,
        to: 300,
        postfix: " M2",
        onChange: function (data) {

            $(".item").each(function () {

                size = parseInt($(this).find(".size").text(), 10);

                if (data.from <= size && data.to >= size) {
                    $(this).addClass('show-me');
                }
                else {
                    $(this).removeClass('show-me');
                }
            });

            $products.isotope({
                itemSelector: '.item',
                filter: filters
            });
        }
    });

    // Range slider Price
    // --------------------------------------

    $("#range-price-slider").ionRangeSlider({
        type: "double",
        min: 0,
        max: 20000,
        from: 0,
        to: 20000,
        postfix: " Kr./md.",
        onChange: function (data) {

            $(".item").each(function () {

                price = parseInt($(this).find(".price").text(), 10);

                if (data.from <= price && data.to >= price) {
                    $(this).addClass('show-me');
                }
                else {
                    $(this).removeClass('show-me');
                }
            });

            $products.isotope({
                itemSelector: '.item',
                filter: filters
            });
        }
    });`

I have tried all sorts of things but I can't seem to get it. Any help or pointers is MUCH appreciated :)

[IonDen]

Hi, the problem here is not in the sliders, it is in your code design.

1. Check this demo: https://jsfiddle.net/IonDen/dfcmryn2/
2. As you can see, all sliders call 1 external function, and this function handles all logic
3. You should do it the same way! Inside onChange function you should only store sliders data and call external function.
4. External function will have the logic to show/hide items.

[SchmidtDEN]

Great Thanks! :) I will look into that, but at first glance it seems that these sliders takes the total sum of the sliders. Whereas I need it to "watch" each other.

It might be the exact same logic, I am just not quite sure how to do it, but will look a bit more into it!

• Thanks again :)

[SchmidtDEN]

Thanks for the help - I fixed it by doing separate "show-me" classes and adding these to the function :)