jQuery and JavaScript Phrasebook

Using Sliders to Manipulate Elements

Click here to view code image

$( "#red, #green, #blue" ).slider({   orientation: "horizontal",   range: "min",   max: 255,   value: 127,   slide: refreshSwatch,   change: refreshSwatch }); $("#red").slider("value", 128); $("#green").slider("value", 128); $("#blue").slider("value", 128);

The slider widget allows you to create slider controls that adjust a value by dragging the mouse. The slider has two components: the slide and the handle. The slide is styled by the .ui-slider-range class, and the handle is styled by the .ui-slider-handle class.

Did you know?

You can define both a min and a max handle that allows you to use a single slider control to define a range instead of a single value.

The following ...