Range

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<input type="range" name="range">

$("input[type='range']").range();

Using Range

Main

range.js
range.css

Dependencies

jQuery
core.js
touch.js

Basic

Range will convert an input into a customizable slider interface:

$("input[type=range]").range();

<input type="range">

Limits

Range will automatically detect the minimum, maximum and increment values based on the min, max and step attributes:

<input type="range" min="2" max="20" step="2">

Vertical

Create a vertical slider with the orient attribute:

<input type="range" orient="vertical">

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-range-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Extends plugin default settings; effects instances created hereafter.

$.range("defaults", { ... });

Parameters

destroy

Removes plugin instance.

$(".target").range("destroy");

disable

Disables target instance

$(".target").range("disable");

enable

Enables target instance

$(".target").range("enable");

resize

Resizes instance

$(".target").range("resize");

update

Updates instance.

$(".target").range("update");

CSS