Properties

NameTypeDefault
disabled Boolean false

Sets or gets whether the range selector is disabled.

<template>
<JqxRangeSelector ref="myRangeSelector"
:disabled="true"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
groupLabelsFormatFunction 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.

<template>
<JqxRangeSelector ref="myRangeSelector"
:showGroupLabels="true" :min="'June 15, 2013'" :max="'August 21, 2013'"
:labelsFormat="'dd'" :markersFormat="'d'" :minorTicksInterval="'day'"
:majorTicksInterval="'week'" :groupLabelsFormatFunction="groupLabelsFormatFunction"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
methods: {
groupLabelsFormatFunction: function (value, date) {
return "<span style='font-style: italic;'>" + value + "<span>";
}
}
}
</script>
height Number | String 100

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

  • "Npx", where N is a number;
  • numeric value in pixels.
<template>
<JqxRangeSelector ref="myRangeSelector"
:height="200"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
labelsFormat 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 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.
<template>
<JqxRangeSelector ref="myRangeSelector"
:labelsFormat="'p'"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
labelsFormatFunction Function null

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

<template>
<JqxRangeSelector ref="myRangeSelector"
:labelsFormatFunction="labelsFormatFunction"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
methods: {
labelsFormatFunction: function (value) {
return "<span style='color: red;'>" + value + "<span>";
}
}
}
</script>
labelsOnTicks Boolean true

<template>
<JqxRangeSelector ref="myRangeSelector"
:labelsOnTicks="false"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
markersFormat 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 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.
<template>
<JqxRangeSelector ref="myRangeSelector"
:markersFormat="'p'"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
markersFormatFunction Function null

<template>
<JqxRangeSelector ref="myRangeSelector"
:markersFormatFunction="markersFormatFunction"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
methods: {
markersFormatFunction: function (value, position) {
return "<span style='color: red;'>" + value + "<span>";
}
}
}
</script>
majorTicksInterval Number | String | Object 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".
<template>
<JqxRangeSelector ref="myRangeSelector"
:majorTicksInterval="5"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
minorTicksInterval Number | String | Object 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".
<template>
<JqxRangeSelector ref="myRangeSelector"
:showMinorTicks="true" :minorTicksInterval="1"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
max Number | String | Date 100

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

  • number;
  • date object;
  • date string.
<template>
<JqxRangeSelector ref="myRangeSelector"
:max="80"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
min Number | String | Date 0

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

  • number;
  • date object;
  • date string.
<template>
<JqxRangeSelector ref="myRangeSelector"
:min="5"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
moveOnClick Boolean true

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

<template>
<JqxRangeSelector ref="myRangeSelector"
:moveOnClick="false"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
padding String | Number "auto"

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

  • "auto";
  • "Npx", where N is a number;
  • numeric value in pixels.
<template>
<JqxRangeSelector ref="myRangeSelector"
:padding="padding"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
data: function () {
return {
padding: '40px 40px 0px 40px'
}
}
}
</script>
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"
<template>
<JqxRangeSelector ref="myRangeSelector"
:range='{ from: 10, to: 50 }'
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
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.

<template>
<JqxRangeSelector ref="myRangeSelector"
:range='{ from: 10, to: 50 }' :resizable="false"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
rtl Boolean false

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

<template>
<JqxRangeSelector ref="myRangeSelector"
:rtl="true"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
showGroupLabels Boolean false

<template>
<JqxRangeSelector ref="myRangeSelector"
:showGroupLabels="true" :min="'June 15, 2013'" :max="'August 21, 2013'"
:labelsFormat="'dd'" :markersFormat="'d'" :minorTicksInterval="'day'"
:majorTicksInterval="'week'"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
showMinorTicks Boolean false

Sets or gets whether minor ticks will be displayed.

<template>
<JqxRangeSelector ref="myRangeSelector"
:showMinorTicks="true"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
snapToTicks Boolean true

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

<template>
<JqxRangeSelector ref="myRangeSelector"
:snapToTicks="false"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
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.

<template>
<JqxRangeSelector ref="myRangeSelector"
:showMajorLabels="true"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
showMarkers Boolean true

Sets or gets whether the markers will be shown.

<template>
<JqxRangeSelector ref="myRangeSelector"
:showMarkers="false"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
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' });
<template>
<JqxRangeSelector ref="myRangeSelector"
:theme="'material'"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>
width Number | String 400

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

  • "Npx", where N is a number;
  • numeric value in pixels.
<template>
<JqxRangeSelector ref="myRangeSelector"
:width="500"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
}
}
</script>

Events

change Event

This event is triggered when the slected range is changed.

Code examples

Bind to the change event of jqxRangeSelector.

<template>
<JqxRangeSelector ref="myRangeSelector" @change="onChange($event)"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
methods: {
onChange: function (event) {
alert('do something...');
}
}
}
</script>

Methods

NameArgumentsReturn Type
destroy None None

Removes the range selector from the DOM.

<template>
<JqxRangeSelector ref="myRangeSelector"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
mounted: function () {
this.$refs.myRangeSelector.destroy();
}
}
</script>
getRange None 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.
<template>
<JqxRangeSelector ref="myRangeSelector"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
mounted: function () {
const value = this.$refs.myRangeSelector.getRange();
}
}
</script>
render None None

Renders the range selector.

<template>
<JqxRangeSelector ref="myRangeSelector"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
mounted: function () {
this.$refs.myRangeSelector.render();
}
}
</script>
refresh None None

Refreshes the range selector.

<template>
<JqxRangeSelector ref="myRangeSelector"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
mounted: function () {
this.$refs.myRangeSelector.refresh();
}
}
</script>
setRange from, to None

Sets the selected range.

<template>
<JqxRangeSelector ref="myRangeSelector"
/>
</template>
<script>
import JqxRangeSelector from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxrangeselector.vue';
export default {
components: {
JqxRangeSelector
},
mounted: function () {
this.$refs.myRangeSelector.setRange(20,80);
}
}
</script>