jQuery RangeSelector API

Properties

Name Type Default

animationDuration Number 100

Sets or gets the snap to ticks and move on click animation duration in milliseconds.

Code example

Set the animationDuration property.

$('#jqxRangeSelector').jqxRangeSelector({ animationDuration: 50 });

Get the animationDuration property.

var animationDuration = $("jqxRangeSelector").jqxRangeSelector("animationDuration");

Try it: animationDuration is set to 1000

disabled Boolean false

Sets or gets whether the range selector is disabled.

Code example

Set the disabled property.

$('#jqxRangeSelector').jqxRangeSelector({ disabled: true });

Get the disabled property.

var disabled = $("jqxRangeSelector").jqxRangeSelector("disabled");

Try it: disabled is set to true

height Number/String 100

Sets or gets the range selector's height.
Possible values:

"Npx", where N is a number;
numeric value in pixels.

Code example

Set the height property.

$('#jqxRangeSelector').jqxRangeSelector({ height: 75 });

Get the height property.

var height = $("jqxRangeSelector").jqxRangeSelector("height");

Try it: height is set to 100

labelFormat String null

Sets or gets the format of the labels.
Possible number formats:

'd' - decimal numbers;
'f'- floating-point numbers;
'n' - integer numbers;
'c' - currency numbers;
'p' - percentage numbers.

Possible date formats:

Note: When the data type is date, the labelFormat property must always be set.

'd' - the day of the month;
'dd' - the day of the month;
'ddd' - the abbreviated name of the day of the week;
'dddd' - the full name of the day of the week;
'h' - the hour, using a 12-hour clock from 1 to 12;
'hh' - the hour, using a 12-hour clock from 01 to 12;
'H' - the hour, using a 24-hour clock from 0 to 23;
'HH' - the hour, using a 24-hour clock from 00 to 23;
'm' - the minute, from 0 through 59;
'mm' - the minutes,from 00 though 59;
'M' - the month, from 1 through 12;
'MM' - the month, from 01 through 12;
'MMM' - the abbreviated name of the month;
'MMMM' - the full name of the month;
's' - the second, from 0 through 59;
'ss' - the second, from 00 through 59;
't' - the first character of the AM/PM designator;
'tt' - the AM/PM designator;
'y' - the year, from 0 to 99;
'yy' - the year, from 00 to 99;
'yyy' - the year, with a minimum of three digits;
'yyyy' - the year as a four-digit number.

Code example

Set the labelFormat property.

$('#jqxRangeSelector').jqxRangeSelector({ labelFormat: 'c' });

Get the labelFormat property.

var labelFormat = $("jqxRangeSelector").jqxRangeSelector("labelFormat");

Try it: labelFormat is set to 'p'

labelPrecision Number 0

If labelRenderer and labelFormat are not defined, sets the precision of the displayed numbers in the labels.

Note: labelPrecision applies only when the data type is numeric.

Code example

Set the labelPrecision property.

$('#jqxRangeSelector').jqxRangeSelector({ labelPrecision: 1 });

Get the labelPrecision property.

var labelPrecision = $("jqxRangeSelector").jqxRangeSelector("labelPrecision");

Try it: labelPrecision is set to 1

labelRenderer callback function null

A custom callback function for rendering the labels. Has one argument - the value of the label.

Code example

Set the labelRenderer property.

$('#jqxRangeSelector').jqxRangeSelector({ labelRenderer: function (value){
 return "<span style='color: red;'>" + value + "<span>"; } });

Try it: labelRenderer is set to a custom function

moveOnClick Boolean true

Sets or gets whether the position of the slider can be changed by clicking on the range selector.

Code example

Set the moveOnClick property.

$('#jqxRangeSelector').jqxRangeSelector({ moveOnClick: false });

Get the moveOnClick property.

var moveOnClick = $("jqxRangeSelector").jqxRangeSelector("moveOnClick");

Try it: moveOnClick is set to false

markerRenderer callback function null

A custom callback function for rendering the markers. Has two arguments - the value of the marker and the position of the marker - either "left" or "right".

Code example

Set the markerRenderer property.

$('#jqxRangeSelector').jqxRangeSelector({ markerRenderer: function (value,
 position) { var position; if (position == "left") { position = "From"; } else if
 (position == "right") { position = "To"; }; return position + ": 
 " + value + ""; } });

Try it: markerRenderer is set to a custom function

markerPrecision Number 2

If markerRenderer and markerFormat are not defined, sets the precision of the displayed numbers in the markers.

Note: markerPrecision applies only when the data type is numeric.

Code example

Set the markerPrecision property.

$('#jqxRangeSelector').jqxRangeSelector({ markerPrecision: 3 });

Get the markerPrecision property.

var markerPrecision = $("jqxRangeSelector").jqxRangeSelector("markerPrecision");

Try it: markerPrecision is set to 1

majorLabelRenderer callback function null

A custom callback function for rendering the major labels. Has two arguments - the value of the major label and the date object.

Note: major labels are applied only if the data type is date.

Code example

Set the majorLabelRenderer property.

$('#jqxRangeSelector').jqxRangeSelector({ majorLabelRenderer: function (value,
 date) { return "<span style='font-style: italic;'>" + value + "<span>";
 } });

Try it: majorLabelRenderer is set to a custom function

markerFormat String null

Sets or gets the format of the markers.
Possible number formats:

'd' - decimal numbers;
'f'- floating-point numbers;
'n' - integer numbers;
'c' - currency numbers;
'p' - percentage numbers.

Possible date formats:

Note: When the data type is date, the markerFormat property must always be set.

'd' - the day of the month;
'dd' - the day of the month;
'ddd' - the abbreviated name of the day of the week;
'dddd' - the full name of the day of the week;
'h' - the hour, using a 12-hour clock from 1 to 12;
'hh' - the hour, using a 12-hour clock from 01 to 12;
'H' - the hour, using a 24-hour clock from 0 to 23;
'HH' - the hour, using a 24-hour clock from 00 to 23;
'm' - the minute, from 0 through 59;
'mm' - the minutes,from 00 though 59;
'M' - the month, from 1 through 12;
'MM' - the month, from 01 through 12;
'MMM' - the abbreviated name of the month;
'MMMM' - the full name of the month;
's' - the second, from 0 through 59;
'ss' - the second, from 00 through 59;
't' - the first character of the AM/PM designator;
'tt' - the AM/PM designator;
'y' - the year, from 0 to 99;
'yy' - the year, from 00 to 99;
'yyy' - the year, with a minimum of three digits;
'yyyy' - the year as a four-digit number.

Code example

Set the markerFormat property.

$('#jqxRangeSelector').jqxRangeSelector({ markerFormat: "MMMM" });

Get the markerFormat property.

var markerFormat = $("jqxRangeSelector").jqxRangeSelector("markerFormat");

Try it: markerFormat is set to 'p'

majorTicksInterval Number/Object/String 10

Sets or gets the interval between major ticks.
Possible values:

number;
object with one of the properties: { milliseconds, seconds, minutes, hours, days, weeks, months, years };
one of the following strings: "millisecond", "second", "minute", "hour", "day", "week", "month", "year".

Code example

Set the majorTicksInterval property.

$('#jqxRangeSelector').jqxRangeSelector({ majorTicksInterval: { days: 2}
 });

Get the majorTicksInterval property.

var majorTicksInterval = $("jqxRangeSelector").jqxRangeSelector("majorTicksInterval");

Try it: majorTicksInterval is set to 10

minorTicksInterval Number/Object/String 5

Sets or gets the interval between minor ticks.
Possible values:

number;
object with one of the properties: { milliseconds, seconds, minutes, hours, days, weeks, months, years };
one of the following strings: "millisecond", "second", "minute", "hour", "day", "week", "month", "year".

Code example

Set the minorTicksInterval property.

$('#jqxRangeSelector').jqxRangeSelector({ minorTicksInterval: "hour" });

Get the minorTicksInterval property.

var minorTicksInterval = $("jqxRangeSelector").jqxRangeSelector("minorTicksInterval");

Try it: minorTicksInterval is set to 1

max Number/Date object/Date string 100

Sets or gets the maximum value of the range selector scale.
Possible values:

number;
date object;
date string.

Code example

Set the max property.

$('#jqxRangeSelector').jqxRangeSelector({ max: 300 });

Get the max property.

var max = $("jqxRangeSelector").jqxRangeSelector("max");

Try it: max is set to 95

min Number/Date object/Date string 0

Sets or gets the minimum value of the range selector scale.
Possible values:

number;
date object;
date string.

Code example

Set the min property.

$('#jqxRangeSelector').jqxRangeSelector({ min: "August 17, 2013" });

Get the min property.

var min = $("jqxRangeSelector").jqxRangeSelector("min");

Try it: min is set to 5

padding Number/String "auto"

Sets or gets the range selector's padding.
Possible values:

"auto";
"Npx", where N is a number;
numeric value in pixels.

Code example

Set the padding property.

$('#jqxRangeSelector').jqxRangeSelector({ padding: "0px" });

Get the padding property.

var padding = $("jqxRangeSelector").jqxRangeSelector("padding");

Try it: padding is set to "0px"

range Object { from: 0, to: Infinity, min: 0, max: Infinity }

An object containing the following properties:

from - the start of the initially selected range.
Possible values: number, date object, date string;
to - the end of the initially selected range;
Possible values: number, date object, date string;
min - the minimum value of the selection.
Possible values: number, object with one of the properties: { milliseconds, seconds, minutes, hours, days, weeks } or one of the following strings: "millisecond", "second", "minute", "hour", "day", "week"
max - the maximum value of the selection.
Possible values: number, object with one of the properties: { milliseconds, seconds, minutes, hours, days, weeks } or one of the following strings: "millisecond", "second", "minute", "hour", "day", "week"

Code example

Set the range property.

$('#jqxRangeSelector').jqxRangeSelector({ range: { from: "01 October, 2013",
 to: "10 October, 2013", min: "day", max: { days: 10}} });

Get the range property.

var range = $("jqxRangeSelector").jqxRangeSelector("range");

Try it: range is set to from 10 to 50

resizable Boolean true

Sets or gets whether the range selector's slider can be resized.

Note: If resizable is set to false, the slider can only be resized programmatically with the method setValue.

Code example

Set the resizable property.

$('#jqxRangeSelector').jqxRangeSelector({ resizable: false });

Get the resizable property.

var resizable = $("jqxRangeSelector").jqxRangeSelector("resizable");

Try it: resizable is set to false

rtl Boolean false

Sets or gets whether the jqxRangeSelector's right-to-left support is enabled.

Code example

Set the rtl property.

$('#jqxRangeSelector').jqxRangeSelector({ rtl: true });

Get the rtl property.

var rtl = $("jqxRangeSelector").jqxRangeSelector("rtl");

Try it: rtl is set to true

showMinorTicks Boolean false

Sets or gets whether minor ticks will be displayed.

Code example

Set the showMinorTicks property.

$('#jqxRangeSelector').jqxRangeSelector({ showMinorTicks: true });

Get the showMinorTicks property.

var showMinorTicks = $("jqxRangeSelector").jqxRangeSelector("showMinorTicks");

Try it: showMinorTicks is set to true

snapToTicks Boolean true

Sets or gets whether the slider will snap to the major and minor ticks.

Code example

Set the snapToTicks property.

$('#jqxRangeSelector').jqxRangeSelector({ snapToTicks: false });

Get the snapToTicks property.

var snapToTicks = $("jqxRangeSelector").jqxRangeSelector("snapToTicks");

Try it: snapToTicks is set to false

showMajorLabels Boolean false

Sets or gets whether the major labels will be shown.

Note: major labels are applied only if the data type is date.

Code example

Set the showMajorLabels property.

$('#jqxRangeSelector').jqxRangeSelector({ showMajorLabels: false });

Get the showMajorLabels property.

var showMajorLabels = $("jqxRangeSelector").jqxRangeSelector("showMajorLabels");

Try it: showMajorLabels is set to true

showMarkers Boolean true

Sets or gets whether the markers will be shown.

Code example

Set the showMarkers property.

$('#jqxRangeSelector').jqxRangeSelector({ showMarkers: false });

Get the showMarkers property.

var showMarkers = $("jqxRangeSelector").jqxRangeSelector("showMarkers");

Try it: showMarkers is set to false

theme String ""

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

Include the theme's CSS file after jqx.base.css.
The following code example adds the 'energyblue' theme.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"type="text/css"
 /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css"
 type="text/css" />

Set the widget's theme property to 'energyblue' when you initialize it.
```
$('#jqxRangeSelector').jqxRangeSelector({ theme: 'energyblue' });
```

Try it: theme is set to 'energyblue'

width Number/String 400

Sets or gets the range selector's width.
Possible values:

"Npx", where N is a number;
numeric value in pixels.

Code example

Set the width property.

$('#jqxRangeSelector').jqxRangeSelector({ width: "200px" });

Get the width property.

var width = $("jqxRangeSelector").jqxRangeSelector("width");

Try it: width is set to 500

Events

change Event

This event is triggered when the slected range is changed.

Code example

Bind to the change event by type: jqxRangeSelector.

$('#jqxRangeSelector').on('change', function () { // Some code here. });

Try it: Bind to the change event by type: jqxRangeSelector.

Methods

destroy Method

Removes the range selector from the DOM.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the destroy method.

var header = $('#jqxRangeSelector').jqxRangeSelector('destroy');

Try it: destroy the jqxRangeSelector.

getRange Method

Gets the selected range. Returns an object with two fields.

Range object fields:

from - the start of the selection - number or date object;
to - the end of the selection - number or date object.

Parameter	Type	Description
None

Return Value
Object

Code example

Invoke the getRange method.

var range = $('#jqxRangeSelector').jqxRangeSelector('getRange');

Try it: gets the range of the jqxRangeSelector.

render Method

Renders the range selector.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the render method.

$('#jqxRangeSelector').jqxRangeSelector('render');

Try it: renders the jqxRangeSelector.

refresh Method

Refreshes the range selector.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the refresh method.

var header = $('#jqxRangeSelector').jqxRangeSelector('refresh');

Try it: refreshes the jqxRangeSelector.

setRange Method

Sets the selected range.

Parameter	Type	Description
from	Number/Date
to	Number/Date

Return Value
None

Code example

Invoke the setRange method.

// @param from - new value of the start of the selection (number, date string
 or date object); // @param to - new value of the end of the selection (number, date
 string or date object). $('#jqxRangeSelector').jqxRangeSelector('setRange', 30,
 70);

Try it: sets a new range of the jqxRangeSelector.