|
|
| Name |
Type |
|
disabled
|
bool
|
Sets or gets whether the range selector is disabled.
|
|
groupLabelsFormatFunction
|
object
|
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.
|
|
height
|
object
|
Sets or gets the range selector's height.
Possible values:
- "Npx", where N is a number;
- numeric value in pixels.
|
|
labelsFormat
|
string
|
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 labelsFormat 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.
|
|
labelsFormatFunction
|
object
|
A custom callback function for rendering the labels. Has one argument - the value of the label.
|
|
labelsOnTicks
|
bool
|
|
|
|
markersFormat
|
string
|
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 markersFormat 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.
|
|
markersFormatFunction
|
object
|
|
|
|
majorTicksInterval
|
object
|
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".
|
|
minorTicksInterval
|
object
|
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".
|
|
max
|
object
|
Sets or gets the maximum value of the range selector scale.
Possible values:
- number;
- date object;
- date string.
|
|
min
|
object
|
Sets or gets the minimum value of the range selector scale.
Possible values:
- number;
- date object;
- date string.
|
|
moveOnClick
|
bool
|
Sets or gets whether the position of the slider can be changed by clicking on the range selector.
|
|
padding
|
object
|
Sets or gets the range selector's padding.
Possible values:
- "auto";
- "Npx", where N is a number;
- numeric value in pixels.
|
|
range
|
object
|
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"
|
|
resizable
|
bool
|
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.
|
|
rtl
|
bool
|
Sets or gets whether the jqxRangeSelector's right-to-left support is enabled.
|
|
showGroupLabels
|
bool
|
|
|
|
showMinorTicks
|
bool
|
Sets or gets whether minor ticks will be displayed.
|
|
snapToTicks
|
bool
|
Sets or gets whether the slider will snap to the major and minor ticks.
|
|
showMajorLabels
|
bool
|
Sets or gets whether the major labels will be shown.
Note: major labels are applied only if the data type is date.
|
|
showMarkers
|
bool
|
Sets or gets whether the markers will be shown.
|
|
theme
|
string
|
Sets the widget's theme.
- Include the theme's CSS file after jqx.base.css.
The following code example adds the 'material' theme. <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"type="text/css"
/> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css"
type="text/css" />
- Set the widget's theme property to 'material' when you initialize it.
$('#jqxRangeSelector').jqxRangeSelector({ theme: 'material' });
|
|
width
|
object
|
Sets or gets the range selector's width.
Possible values:
- "Npx", where N is a number;
- numeric value in pixels.
|
|
|
|
onChange
|
Event
|
This event is triggered when the slected range is changed.
|
|
|
| Name |
Arguments |
Return Type |
|
destroy
|
()
|
void
|
Removes the range selector from the DOM.
|
|
getRange
|
()
|
object
|
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.
|
|
render
|
()
|
void
|
Renders the range selector.
|
|
refresh
|
()
|
void
|
Refreshes the range selector.
|
|
setRange
|
(object from, object to)
|
void
|
|
|