Range

Multi Handle - With Output

Single Handle - With Left Progress Indicator - With Text Output

Multi Handle - With Text Output

Single Handle - With Right Progress Indicator - No Output

Single Handle - Range Set - No Output

Single Handle - No Settings - No Output

Display Output:

Form Update

Options

Options are set on the HTML div element, no additional javascript is required for the range sliders to display or work. There are several optional data- attributes that can be used for customisation as follows:

array - a numerial javascript array to determin the 'step' points along the slider, can be used to force the values into set positions along the slider - MUST be same length array as -values field if used together
values - a text javascript array which will form the output data for the range handles, if not present a fallback to the -array happens - MUST be same length array as -array field if used together
connect - value of '-1' OR '1' accepted, -1 being left connect and 1 being right connect, ignored for multiple handles
outputelem - HTML element ID accepted, will override the innerHTML of the given element
outputformelem - HTML element ID accepted, will override the value of the given element and fire an onchange event if present on the form field
start - comma deliminated list accepted, if not enough handles or not enough 'steps' will be ignored, if not present handles will default to lowest steps.
handles - positive whole integer accepted, REQUIRES values or array field, if value greater than start items start will be ignored, if not enough 'steps' will revert to one handle

Adjusting the attributes in anyway then reinitialising the slider will force an update of the slider, feel free to play with this in the developers options of your browser and clicking the 'Reset Sliders' button.

Range Generation Helper

Range Min Range Max Range Step Size Output Range