Steven You

A Forged Geek.

Multiple Sliders on One Page - Jquery

I was trying to put several sliders on the same page. There are actually lots of tutorials can tell you how to do that, like this one.

However, I want multiple, like this:

In the sample code, the javascript looks like this:

Liquid error: undefined method `Py_IsInitialized’ for RubyPython::Python:Module

They find the html element by id. But when I generate sliders in a loop, it would be nasty to assign ids to each slider:

Liquid error: undefined method `Py_IsInitialized’ for RubyPython::Python:Module

Fortunately each() in jquery is very handy, we can get all the divs, and loop through them:

Liquid error: undefined method `Py_IsInitialized’ for RubyPython::Python:Module

When using each() sometime you could encounter error like:

“Uncaught TypeError: Object # has no method ‘find’”

This is because the obj in $('.contSlider').each(function(i,obj) { refers to a DOM object rather than a jquery object.

Add $() to make it a jquery object like this: $(obj).find('.currentValue').

In the end, what I got is:

slider 1

Current value: 0

slider 2

Current value: 0

–EOF–

Comments