Proportional sliders à la Humble Bundle

August 28, 2017 2:00 AM

I am looking for example code to make a similar set of sliders as those on the Humble Bundle site. They let you split 100% of funds in a responsive way, pulling one slider up moves the others down. What is this called and where can I find code to adjust for my needs?

I have tried googling responsive slider etc but mainly get sent to slideshow widgets for photo galleries. Help me get my slide on please!

posted by J.R. Hartley to Computers & Internet (5 answers total)

Best answer: Not my work, but this might help: http://jsfiddle.net/paulitto/fBxCm/1/

Got there from StackOverflow after a google for "javascript linked sliders increase decrease"
posted by quinndexter at 2:30 AM on August 28, 2017 [1 favorite]

Best answer: Here are the docs for the reference in the comment above^ https://jqueryui.com/slider/.

And the documentation: http://api.jqueryui.com/slider/

You'd have to use the change event to adjust the other sliders when one changes.
posted by czytm at 7:20 AM on August 28, 2017

Best answer: also the slide event as the jsfiddle quinndexter links to above shows.
posted by czytm at 7:23 AM on August 28, 2017

Best answer: Yeah, I'm not a capital C Coder - I can usually beat Wordpress into submission. czytm's additions will likely be very helpful. I think the problem is "responsive" is more likely to bring up CSS/ layout stuff, with slider also meaning a slideshow thing, hence your goggle results being off. So I switched "responsive" for "linked" and added keywords. Hopefully a better targeted google, plus the docs will get you there.
posted by quinndexter at 7:55 AM on August 28, 2017

Response by poster: Thanks for both the links and the advice on search terms. I am going to try using that as a base! I really do wish the dev had taken the example to 3 immediately instead of stopping at two though!
posted by J.R. Hartley at 2:43 AM on August 30, 2017