Vue UI Components Documentation

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>

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>

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>

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>

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>

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

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>

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>