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

• "auto";
• "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");

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

• "auto";
• "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");

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' });

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");

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");

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");

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");

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");

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");

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");

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");

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");

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");

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");

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>"; } });

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>";
                            } });

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 + ""; } });

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");

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");

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");

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");

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");

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");

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");

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. });
                        

Sets the selected range.

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);

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.

Code example

Invoke the getRange method.

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

Renders the range selector.

Code example

Invoke the render method.

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

Refreshes the range selector.

Code example

Invoke the refresh method.

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

Removes the range selector from the DOM.

Code example

Invoke the destroy method.

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