Search results

Range in Vue Range Navigator component

30 Jul 2021 / 1 minute to read

The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range.

  • By dragging the thumbs.
  • By tapping on the labels.
  • By setting the start and end through value properties.

Following code example shows how to configure the selected range using value property of RangeNavigator.

Source
Preview
app.vue
Copied to clipboard
<template>
<div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'>
        <e-rangenavigator-series-collection>
            <e-rangenavigator-series :dataSource='data' type='Area' xName='x' yName='y' width=2>
            </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
</div>
</template>
<script>
import Vue from "vue";
import { RangeNavigatorPlugin, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

Vue.use(RangeNavigatorPlugin);

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]
  }
};
</script>