Search jQuery

jQuery Forum

Stuck trying to show/hide items using multiple jQuery UI Sliders

in Using jQuery UI • 8 years ago

I'm trying to develop a set of show/hide filters using multiple jQuery UI sliders.

I have a set of blocks - each has several data-attributes (time) assigned to them.

<div id="block1" data-departuretime0="480" data-arrivaltime0="1200">

I'm trying to setup several sliders so a user can select multiple time ranges with the sliders and have the appropriate boxes within those times displayed. I can make one slider work but I'm stuck when I add the second slider. I need to show/hide it's results without disturbing the results of the first slider.

I have a semi-working jsFiddle here: http://jsfiddle.net/47yDB/12/

Any help or advice would be appreciated!
Jim

Replies(11)

Adam Bodu..

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

Can you provide any more specific details? I see the use case, which is helpful, but is there a specific section of code that's throwing you a curve-ball?

thecrumb

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

Adam,

Thanks for the reply.

I can make one slider work. However when I add the second slider and show/hide logic - depending on how I do it - it will either override the first sliders actions or it won't do anything at all.

I've written about a zillion iterations of the code trying all sorts of things - setting flags for when its visible/hidden, etc but I just can't seem to work out the logic to get both of them applying at the same time.

I tried moving the show/hide method out of each slider and into it's own function but that didn't work either.

I also looked at using the jQuery filter method to create a function but got lost in the logic there too :\

I'm probably over thinking things at this point but I've been staring at this code for so long I'm just frustrated at this point that I can't figure it out.

Thanks!

Jim

Adam Bodu..

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

I made a minor update, so that you're not wrapping your document ready handler inside another document ready handler, though, I'm not sure that will make any difference. I see nothing obviously wrong in your code, so I'm not sure how to replicate the issue. I'll look again if you can give me some specific instructions.

thecrumb

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

Thanks - that doesn't seem to have done anything.

Somehow I need to tweak my if/else show/hide logic so that when I adjust Slider #1, then adjust Slider #2 - Slider #2 doesn't 'overwrite' Slider #1's displayed items.

Right now if I do 7am-9am on Slider #1 I correctly get A & B but as soon as I start adjusting Slider #2 my results are off and if I select 7-9pm for Slider #2 I end up with A & C - but should should have A, B and C since those 3 badges have times which fall into the two ranges 7-9AM & 7-9PM.

Jim

Adam Bodu..

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

Yeah, I guess the only advice I can give here is to console.log() all the values you're comparing in the slide event handlers, and manually do the logic in your head. The jQuery UI code looks fine, and it's probably something trivial you're missing. Good luck.

thecrumb

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

Thanks Adam. I took a break from it over the holidays. Need to get back in there and see what I can come up with. Was hoping to avoid an ugly mess of if/else statements but at this point that may have to be the solution.

Thanks!

Jim

kbwood.au

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

Try this. You apply both ranges at the same time.

thecrumb

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

kbwood,

Thanks for the help!!

Your example didn't pass my use test - when moving both sliders I ended up with just A displayed but I tweaked your example a bit: http://jsfiddle.net/PDP8W/1/

Basically nested the IF's and added an OR in the middle instead of AND and it seems to work.

BUT if I just move the first slider and don't adjust the second slider - nothing is filtered which doesn't pass the first test

Set departure slider to 7-9AM - Badge A and B should display (8am)
Without changing first slider, set arrival slider to 7-9PM - Badge C should display (8pm)
At this point Badges A, B AND C should be displayed.
D should still be hidden.

Any ideas?

Jim

kbwood.au

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

If you combine the conditions with OR then everything is displayed when you restrict just the departure time since they are all between midnight and midnight for the arrival time.

What are you trying to achieve?

thecrumb

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

I'm trying to mimic the functionality you see on a travel site for filtering flights, for example, by time.

My 'blocks' will have a set of start/end times and the user can use multiple sliders to show or hide those blocks based on time(s).

Making one slider work is easy. Making 2 (or possibly more) sliders works has proven to be a challenge. :)

For my example - say the blocks represented a school class.

I want to see classes that start between 7-9AM (1st slider) AND classes that start between 7-9PM (2nd slider). I may want to introduce a third slider that would filter by lunch time for example.

Hope that makes sense, and appreciate the help! I'm right in the middle of a deadline but hopefully I can get some time to look at this over the weekend again!

Jim

kbwood.au

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

8 years ago

That's what you're getting with the OR:

1) Depart 7-9am (A, B) plus Arrive 12am-12am (A, B, C, D)
2) Depart 7-9am (A, B) plus Arrive 7-9pm (A, C)

Maybe if a slider is set to the min/max you don't want to include it in the filtering process.

Top Reply

Response title

Attachments

jQuery Forum

Stuck trying to show/hide items using multiple jQuery UI Sliders

Replies(11)

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Re: Stuck trying to show/hide items using multiple jQuery UI Sliders

Statistics

Tags

Actions