Range Control

Range Control is a jquery slider plugin which turns selected hidden input elements into slider controls which can select a single value, a range of values or an array of values. Slider handles can be moved using mouse or keyboard arrow keys. When using a slider to select multiple values handles can be added with Shift + click and removed with Ctrl + click.

Usage

This widget requires JQuery version 3.0. Include "jquery.range-control.js" script to use the component and "jquery.range-control.css" to style its look and feel.

Example

$('#range').rangeControl(options);
        

Call of this function creates slider element with proper amount of handles and inserts in after the specified hidden input element. The value of input element contains the value of corresponding slider.

Options

Options used to set up the slider widget can be passed as an argument to the constructor or defined in "ata-options" argument of respective hidden input. Using latter please be sure to pass proper JSON string to the argument.

The plugin currently accepts the following options:

• min

The minimum value of the slider. Default is 0.

• max

The maximum value of the slider. Default is 100.

• step

The size of step the slider takes between min and max. Default is 1.

• orientation

Determines whether the slider is positioned horizontally ("horizontal" value, default) of vertically ("vertical" value).

• disabled

Disables the slider if set to true. Default is false.

• delim

Specifies the delimiter in returned value. Default is ",".

• rangeType

Specifies the type of the slider. Possible values:

1. "single" (default) - slider control with single handle used to specify single value;
2. "range" - slider control with two handles used to choose a range of values;
3. "multiple" - slider control with multiple handles used to select multiple values between min and max.

• minHanles

The minimum amount of handles for a multiple range control. Default is 1.

• maxHandles

The maximum amount of handles for a multiple range control. Default is 1.

• allowPaging

If set to true, allows paging through values using PgUp and PgDown keyboard buttons, and setting min and max value using Home and End buttons. Default is true.

• stepsPerPage

If paging through values is allowed, defines the amount of steps per page. Default is 10.

• className

Additional class name for slider control.

• currentValue

Defines whether the current value of slider will be displayed. Possible values:

1. false - current value is not displayed;
2. object containing the following display settings:
   • position - the position of current value box relatively to the slider control ("top" or "bottom" for horizontal slider, "left" or "right" for vertical).

Default value is {position: "top"}.

• scale

Defines whether the scale is displayed next to the slider. Possible values:

1. false - scale is not displayed;
2. object containing the following display settings:
   • position - the position of current value box relatively to the slider control ("top" or "bottom" for horizontal slider, "left" or "right" for vertical);
   • labels - defines whether the lables are displayed next to the scale marks. Can be set to false (labels are not displayed), true (proper values are displayed next to the marks) or an array of label values.
   • interval - sets the interval between the scale marks.

Default value is {position: "bottom", labels: false, interval: 10}.

Events

Following event names are used to attach event handlers to the slider widget via corresponding hidden input element:

• rangeControlSlide - triggers when user slides a handle. Slide can be forbidden if the handler returns false. Arguments passed to the handler:

  • event - event object;
  • value - current value of the handle. Please note that this value is not equal to the current value of the slider, as the value of the slider is changed after the user releases mouse or keyboard button.

• rangeControlChange - triggers when user changes the value of slider via sliding and releasing the handle or programmaticaly via changing the value of corresponding input.

• rangeControlSlideStart - triggers when user starts the slide. Event can be cancelled if the handler returns false.

• rangeControlSlideStop - triggers when user ends the slide.

• rangeControlAddHandle - triggers when user adds a handle to a multiple slider contol.

• rangeControlRemoveHandle - triggers when user removes a handle from a multiple slider contol.

Please be sure to use "rangeControlEvent" namespace when attaching a handler to these events so they can be detached properly.

Example

$('#range').on('rangeControlSlide.rangeControlEvent', function (event, value) {
        console.log(value);
});

Destroy

You can cleanly remove the slider by passing "destroy" as an argument:

$('#range').rangeControl("destroy");
        

This will remove slider widget from the DOM and detach all related events from the corresponding input element.