Home

Wiki Pages: Home | FAQ | Setup | Options | Events | Theme | Change

Features

• Numerical slider similar to the jQuery UI Slider - currently it only works with percentages (0-100%)
• This slider follows a bezier path. The parameters are set using the pathslider builder.
• Designed to work in older browsers (no canvas support), just add the path as a background image.
• Get and set the slider position dynamically.
• Slider handle (grip) can be set to rotate along with the angle of the curve (uses css3).
• Callback events are available: create, update, start, slide, change, and stop.
• The slider itself works in all browsers: IE6+, Opera, Chrome, Firefox and Safari (known issues below)

Main Demos

• Pathslider
• Pathslider Builder

Other Demos

• Pathslider Playground
• Show current percent in a tooltip (uses Jatt)

Known Problems

• The grip/handle will work if the loop folds back on itself - try these points to see an example: 75,200,200,-125,-200,0,225,200
• The S-Curve demo seems to get stuck near 100% but only in Firefox and on the demo page. It works fine when isolated. The grip isn't staying centered under the cursor like it does in Chrome.
• Safari for Windows likes to start with the grip in the upper left corner of the slider box... most of the time when I hover over it, it jumps to where it should be... wow that is so weird. Also, the "S" curve demo doesn't want to work at all...

Dependencies

• jQuery 1.4.4+
• A browser that supports canvas (needed for the builder; optional for the pathslider plugin itself).
• A browser that supports css3 transforms (necessary to rotate the grip).

Licensing

• Pathslider & builder are under a MIT License.