Customization in Vue Range navigator component

13 Jun 202420 minutes to read

Navigator appearance

The Range Selector can be customized by using the navigatorStyleSettings. The selectedRegionColor property is used to specify the color for the selected region, whereas the unselectedRegionColor property is used to specify the color for the unselected region.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :navigatorStyleSettings='navigatorStyleSettings'>
      <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 setup>
import { provide } from "vue";
import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

const valueType = 'DateTime';
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM-yy';
const navigatorStyleSettings = {
  unselectedRegionColor: 'skyblue',
  selectedRegionColor: 'pink'
};
const data = bitCoinData;

provide('rangeNavigator', [DateTime, AreaSeries]);

</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :navigatorStyleSettings='navigatorStyleSettings'>
      <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 { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
      valueType: 'DateTime',
      value: [new Date('2017-09-01'), new Date('2018-02-01')],
      labelFormat: 'MMM-yy',
      navigatorStyleSettings: {
        unselectedRegionColor: 'skyblue',
        selectedRegionColor: 'pink'
      },
      data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Thumb

The thumb property allows to customize the border, fill color, size, and type of thumb. Thumbs can be of two shapes: Circle and Rectangle.

Composition API (~/src/App.vue)

<template>
    <div id="app">
      <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
        :navigatorStyleSettings='navigatorStyleSettings'>
        <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 setup>
  import { provide } from "vue";
  
  import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
  import { bitCoinData } from "./default_data.js";
  
  const valueType = 'DateTime';
  const value = [new Date('2017-09-01'), new Date('2018-02-01')];
  const labelFormat = 'MMM-yy';
  const navigatorStyleSettings = {
    thumb: {
      type: 'Rectangle',
      border: { width: 2, color: 'red' },
      fill: 'pink'
    }
  };
  const data = bitCoinData;
  
  provide('rangeNavigator', [DateTime, AreaSeries]);
  
  </script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :navigatorStyleSettings='navigatorStyleSettings'>
      <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 { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
      valueType: 'DateTime',
      value: [new Date('2017-09-01'), new Date('2018-02-01')],
      labelFormat: 'MMM-yy',
      navigatorStyleSettings: {
        thumb: {
          type: 'Rectangle',
          border: { width: 2, color: 'red' },
          fill: 'pink'
        }
      },
      data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Border customization

Using the navigatorBorder, the width and color of the Range Selector border can be customized.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :navigatorBorder='navigatorBorder'>
      <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 setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

const valueType = 'DateTime';
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM-yy';
const navigatorBorder = { width: 4, color: 'green' };
const data = bitCoinData;

provide('rangeNavigator', [DateTime, AreaSeries]);

</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :navigatorBorder='navigatorBorder'>
      <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 { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
      valueType: 'DateTime',
      value: [new Date('2017-09-01'), new Date('2018-02-01')],
      labelFormat: 'MMM-yy',
      navigatorBorder: { width: 4, color: 'green' },
      data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Deferred update

If the enableDeferredUpdate property is set to true, then the changed event will be triggered after dragging the slider. If the enableDeferredUpdate is false, then the changed event will be triggered when dragging the slider. By default, the enableDeferredUpdate is set to false.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'
      :navigatorBorder='navigatorBorder'>
      <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 setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

const valueType = 'DateTime';
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM-yy';
const navigatorBorder = { width: 4, color: 'green' };
const data = bitCoinData;

provide('rangeNavigator', [DateTime, AreaSeries]);

</script>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :navigatorBorder='navigatorBorder'>
            <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 { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
name: "App",
components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
     valueType: 'DateTime',
     value: [new Date('2017-09-01'), new Date('2018-02-01')],
     labelFormat: 'MMM-yy',
     navigatorBorder : { width: 4, color: 'green'},
     data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Allow snapping

The allowSnapping property toggles the placement of the slider exactly to the left or on the nearest interval.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :allowSnapping='allowSnapping'>
      <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 setup>
import { provide } from "vue";
import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

const valueType = 'DateTime';
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM-yy';
const allowSnapping = true;
const data = bitCoinData;

provide('rangeNavigator', [DateTime, AreaSeries]);

</script>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' :allowSnapping='allowSnapping'>
      <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 { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
  name: "App",
  components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  data() {
    return {
      valueType: 'DateTime',
      value: [new Date('2017-09-01'), new Date('2018-02-01')],
      labelFormat: 'MMM-yy',
      allowSnapping: true,
      data: bitCoinData
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Animation

The speed of the animation can be controlled using the animationDuration property. The default value of the animationDuration property is 500 milliseconds.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat' animationDuration=2000>
      <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 setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

const valueType = 'DateTime';
const value = [new Date('2017-09-01'), new Date('2018-02-01')];
const labelFormat = 'MMM-yy';
const data = bitCoinData;

provide('rangeNavigator', [DateTime, AreaSeries]);

</script>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-rangenavigator :valueType='valueType' :value='value' :labelFormat='labelFormat'  animationDuration=2000>
            <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 { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";
import { bitCoinData } from "./default_data.js";

export default {
name: "App",
components: {
    "ejs-rangenavigator": RangeNavigatorComponent,
    "e-rangenavigator-series-collection": RangenavigatorSeriesCollectionDirective,
    "e-rangenavigator-series": RangenavigatorSeriesDirective
  },
  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>

See Also

• Grid and Tick Lines
• Labels