RmzSlider / horizontal slider for jQuery

This is a simple lightweight slider written by Szabolcs Kurdi and is released under the MIT license.

As a jQuery plugin, it doesn't require anything except the core jQuery 1.3.2.

Download the component (includes these examples).

NOTES ON DOM ELEMENTS

The javascript code generates html elements; the innerHTML of the target will look like this:

the buttons are optional (addButtons = true); position for the container is changed to relative, inner items are absolute positioned for this parent.
Everything else shall be styled with css, the classnames are hardcoded.

NOTES ON COMMUNICATION / INTERFACES

The communication with the component is done via custom events

you can LISTEN for events on

  1. the container itself: sliderchanged returns {handles: [array of objects with value and percent]}

    EXAMPLE:

    $("#myslider").bind("sliderchanged", function(event, data){console.log("slider changed: ", data);});

  2. on the handle dom elements: dragstart, dragging, changed these return an object: {value: Number, percent: Number} percents are always >= 0 <= 1

    EXAMPLE:

    $("#myslider .handle_num_0").bind("dragstart", function(event, data){console.log("dragstart: ", data);});

you can TRIGGER certain events on

  1. the container: setparams you can modify the P (params) object and refresh the handles, for further information see the onContSetParams function

    EXAMPLE:

    $("#myslider").trigger("setparams", {step: 50, refresh: true, maxValue: 400});

  2. on the handle dom elements: setvalue for further information see the setValue function

    EXAMPLE:

    $("#myslider .handle_num_2").trigger("setvalue", {value: 380, animate: true});

CHEATSHEET

$("#slider").RmzSlider({minValue: 100, maxValue: 200});
$("#slider .handle").bind("dragfinished", function(event, data){console.log("drag finished: ", data);});
$("#slider .handle").bind("dragstart", function(event, data){console.log("drag start: ", data);});
$("#slider .handle").bind("dragging", function(event, data){console.log("dragging: ",data);});
$("#slider .handle").bind("changed", function(event, data){console.log("handle moved: ", data);});
$("#slider").bind("sliderchanged", function(event, data){console.log("slider changed: ", data);});

$("#slider .handle_num_1").trigger("setvalue", {value: 380, noFire: true});
$("#slider .handle_num_2").trigger("setvalue", {percent: 0.75, animate: true, });
$("#slider").trigger("setparams", {step: 50, refresh: true, maxValue: 400});
$("#slider").trigger("firechange");

Examples

Basic functionality

Generating multiple sliders at once

The text inputs are two way controls; change the values there and the handles will follow. You can also randomize the values.
As you can see, it is pretty easy to create unobtrusive sliders which fall back to plain old inputs if no javascript is available.

Using events, a complex example

Listening for slider changed, changing parameters dinamically

You can listen on the container for a change event; the returned object (.handles) has all the values and percents in an array.

Some parameters may be changed on the fly, though for more complex changes I recommend taking out all the values and then recreating the slider; finally send back the stored values; use noFire:true, animate:false).