Range Slider combined into one slider min/max

[fourroses666]

Is there any way to combine the mix and max into one (two handles)? https://demos.kunkalabs.com/mixitup/filtering-by-range/

I will need to have pagination too and will buy a license but need to know if its possible to have a "multislider". I can't find any examples of that already in mixitup.

I'm aiming for a slider like this: http://jqueryui.com/slider/#range Or: http://ionden.com/a/plugins/ion.rangeSlider/en.html Or: https://leaverou.github.io/multirange/ Or: https://codepen.io/Pierre_Hamel/pen/ocJEH Or: https://refreshless.com/nouislider/ Or: http://jsfiddle.net/j08691/sh0q62b7/

[fourroses666]

I'm not that great coder. I will give this one a try; http://jsfiddle.net/IonDen/r5aox84v/ Looks like thats possible to use.

[fourroses666]

Oke I tried for a couple of hours but I'm not capable of getting it to work. I'm a bit surprised its not available :(

[patrickkunka]

Hi,

The demo you linked to does not use any particular plugin intentionally, in order to demonstrate the simplest possible integration with "native" UI, but you can use whatever range slider UI you like as this has nothing to do with MixItUp. What matters is how you integrate your range slider UI plugin with MixItUp.

Of all the sliders you've listed, the only compatibility constraints are that:

• The slider exposes an API to read its min and max values
• The slider exposes a change event (or similar) that you can hook into in order to re-filter mixitup when your values change.

To understand the integration better, please see the comments in the source code of the demo you linked to:

https://github.com/patrickkunka/mixitup/blob/v3/demos/filtering-by-range/index.html

In order to adapt the demo to use the "ion rangeslider" you linked to, you would firstly need to modify the getRange() function to read the values from ion slider's API:

function getRange() {
    var min = Number($inputFrom.prop('value'));
    var max = Number($inputTo.prop('value'));

    return {
        min: min,
        max: max
    };
}

Secondly, you need to remove the change event handlers at the bottom of the file and replace them with handlers for to the equivalent input event from ion slider's API:

$inputFrom.on("input", handleRangeInputChange);
$inputTo.on("input", handleRangeInputChange);

Finally, in the filterTestResult() function, modify the business logic as needed to suit your needs. In the demo, we test each target against its data-size attribute, but you can change this to whatever you want.

Hope that helps.

[fourroses666]

Thanks for explaining, I will have a try to get it working.

[fourroses666]

Sorry, I just can't get it to work on my site. Is there any way you or someone else can fix it in the jsfiddle example below? Would be very helpful for me and maybe many others. I have placed IonRangeSlider into the example together with the default one.

https://jsfiddle.net/8bhs9pa3/5/

Doesn't seem to update the grid items. $inputFrom.on("input", handleRangeInputChange); $inputTo.on("input", handleRangeInputChange);

[fourroses666]

https://jsfiddle.net/5hL1pnbw/2/

Have used SetInterval but thats not good, any idea how to fix that?

[Sybrenb]

I'm curious to, can you please help us patrick? Appreciate it :).

[fourroses666]

I need to have multiple sliders, so far I came up to this example; https://jsfiddle.net/34y58od2/2/ Which does work but as you can see this isn't the most beautiful code. Thereby I need it to work with #hash too.

So I hope the code can be improved and done the right way.

[Sybrenb]

Thank you for that example of multiple sliders with mixitup fourroses.. Just what I needed for my project. Appreciate it.

I'm stuggeling to remove the

'setInterval(function(){ handleRangeInputChange(); }, 1500);'

. It would be nice to just filter the grid after the value of the slider changes.

@patrickkunka

[fourroses666]

Hi Patrick,

I have bought Multifilter and Pagination and I'm really happy with it. Works great. But I really would like to have a multiple rangeslider (price and year) and use it in the URL (hash).

Would it be possible to have a "live update" slider which updates the hash. I don't know what it would cost. Is there any way you can help me out?

[patrickkunka]

Hi @fourroses666 - I've forked and fixed your fiddle:

https://jsfiddle.net/kw85Lb1j/

This is the most simple possible integration with MixItUp. I've removed anything else from your fiddle that isn't related to directly integrating MixItUp with IonSlider (i.e. the additional text input fields). You can add this stuff back in if you need it, but this works as is.

[patrickkunka]

Here's the fiddle adapted again for multiple sliders:

https://jsfiddle.net/kw85Lb1j/1/

[fourroses666]

Hi Patrick, thank you allot for making this code looking allot better.

I have implemented it on my site but the items in the container have a detailpage, so when going back to the previous page (with a link to the page) the slider is reset again.

The Hash needs to be add and updated. https://fiddle.jshell.net/kw85Lb1j/1/show/light/ Would that be possible for the (multiple) sliders?

Also won't be possible to share the "pre-set" link. Like: http://mysite.com/overview#car=audi&pricefrom=10000&priceto=20000

[fourroses666]

I have a script which saves the URL with hash in sessionstorage so when I go back it remembers the last state. Because the slider price from/to etc. is not in the URL I won't be able to store that.