Using ion range slider together with jplist range slider

[mariojfduarte]

Hi there,

I'm trying to use apply your code to my existing project and I'm facing a problem, I can't get it to work.

My js: ` $(function () {

    console.log( 'ready!' );

    // PRICE RANGE - Start
        $("#range_price").ionRangeSlider({
            hide_min_max: true,
            keyboard: true,
            min: 0,
            max: 2000,
            from: 0,
            to: 1000,
            type: 'double',
            step: 10,
            postfix: " €",
            grid: true
        });

    // SAVE slider instance to var
        var slider_price = $("#range_price").data("ionRangeSlider");

        $("#range_area").ionRangeSlider({
            hide_min_max: true,
            keyboard: true,
            min: 0,
            max: 200,
            from: 0,
            to: 100,
            type: 'double',
            step: 10,
            postfix: " m<sup>2</sup>",
            grid: true
        });

    // SAVE slider instance to var
        var slider_area = $("#range_area").data("ionRangeSlider");

    // UPDATE
        document.getElementById("update_range").onclick = function() {
    // for Sale
            if(document.getElementById('update_range').value == "2") {
                slider_area.update({
                hide_min_max: true,
                keyboard: true,
                min: 0,
                max: 500,
                from: 0,
                to: 100,
                type: 'double',
                step: 10,
                postfix: " m<sup>2</sup>",
                grid: true});

                slider_price.update({
                hide_min_max: true,
                keyboard: true,
                min: 0,
                max: 1000000,
                from: 0,
                to: 500000,
                type: 'double',
                step: 10000,
                postfix: " &euro;",
                grid: true});

....`

and my html:

`

Price

                </div>`

`

More Details

```

For Rent

Price: 600 €

Area: 70 m<sup>2</sup>

€/m<sup>2</sup>: 10

TITLE

teste5...

` ``` What would be the easiest way to get it to work?

[1rosehip]

Hello, it's very difficult to help you with a code snippet like posted above. Please use a service like jsFiddle, jsBin, or Codepen to create your test case.

Also please follow jPList guidelines for opening issues: https://github.com/no81no/jplist/wiki/Reporting-issues

[mariojfduarte]

Hi there, thank you for your reply. I will do it later today.

[mariojfduarte]

Hi again, sorry but I din]t have any time to create a jsFiddle so I decided to simplify my question:

`$("#range_price_area").ionRangeSlider({ grid: true, min: 0, max: 20, from: 10, step: 1, prettify_enabled: true, postfix: " €/m<sup>2</sup>", prettify_separator: ".",

            onStart: function (num){
                $('#content > .col-md-4').hide().filter(function() {

                maxPriceArea = num.from;

                var price = parseInt($(this).data("price"), 10);
                var area = parseInt($(this).data("area"), 10);
                var price_area = parseInt($(this).data("price-area"), 10);   

                return price >= minPrice && price <= maxPrice && area >= minArea && area <= maxArea && price_area <= maxPriceArea;

            }).show();
            }

            ,onChange: function (num) {
                $('#content > .col-md-4').hide().filter(function() {

                maxPriceArea = num.from;

                var price = parseInt($(this).data("price"), 10);
                var area = parseInt($(this).data("area"), 10);
                var price_area = parseInt($(this).data("price-area"), 10);   

                return price >= minPrice && price <= maxPrice && area >= minArea && area <= maxArea && price_area <= maxPriceArea;
            }).show();
            }
        });`

I'm using a different slide (ion range slide) and can´t find a way to update jplist items list! Any idea how can I access it directly?

Thank you for your time

[1rosehip]

I'm not familiar with ion range slide. Maybe you can try the following API: http://jplist.com/documentation/api

[mariojfduarte]

The api works but my problem is different. I need to make my slider send its values to jplist range slider, how can I access jplis range slider function?