Pathslider

jQuery Pathslider playground https://github.com/Mottie/Pathslider

HTML

<link rel="stylesheet" href="http://mottie.github.com/Pathslider/css/pathslider.css">
<script src="http://mottie.github.com/Pathslider/js/jquery.pathslider.js"></script>
<div id="slider"></div>

CSS

#slider {
    width  : 275px;
    height : 60px;
    background: url();
    margin: 10px;
}

JavaScript

$('#slider').pathslider({

    // *** Appearance ***
    // class added to the grip/handle
    // css presets: "black", "silver", "chrome1" or "chrome2"
    gripClass: '',
    // when true, the grip will rotate based on the shape of the path
    rotateGrip: true,

    // use canvas, if available
    useCanvas: true,
    // canvas bezier curve styling
    curve: {
        width: 4,
        color: "#333",
        cap: "round"
    },

    // *** Curve settings ***
    // 0-100 starting percentage value
    value: 50,
    // BEZIER POINTS
    // sx,sy     = start x & y
    // csxo,csyo = control start x & y offset from start point
    // cexo,ceyo = control end x & y offset from end point
    // ex,ey     = end x & y
    //           [ sx,sy, csxo,csyo, cexo,ceyo,  ex,ey ]
    points: [0, 50, 50, -50, -50, -50, 250, 50],

    // *** Smoothness tweaks ***
    // Total number of points of the curve to save; increase in increments of
    // 100 to smooth out the grip movement, but not more than 500 (it slows
    // everything down) I would prefer the script to automatically determine
    // the number of points needed, but for now it is an option
    dataPoints: 200,
    // Distance on path from the last position (percentage) to check
    // increase this to scroll faster
    tolerance: 3,
    // Distance from cursor x/y to find matching x/y on the curve (should be
    // about the same size as the grip)
    range: 30,
    
    // *** Callback functions ***
    // called immediately after the pathslider has initialized
    create  : function(e,slider){},
    // called once the grip has been released
    update  : function(e,slider){alert('');},
    // called while the grip is moving
    slide   : function(e,slider){}
    
});