Selecting range in Vue Range navigator component

3 Mar 20231 minute to read

The Range Selector’s left and right thumbs are used to indicate the selected range in the large collection of data. A range can be selected in the following ways:

  • By dragging the thumbs.
  • By tapping on the labels.
  • By setting the start and the end through the value property.
    <div id="app">
        <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'>
                <e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";


export default {
  data() {
    return {
     valueType: 'DateTime',
     value: [new Date('2017-09-01'), new Date('2018-02-01')],
     labelFormat: 'MMM-yy',
     data: bitCoinData
  provide: {
    rangeNavigator: [DateTime, AreaSeries]