Feature rich Vue Range Selector Control
- Quickly visualize high-level data and select a time-period with a modern interface to filter data for in-depth analysis.
- Integrate seamlessly with Charts, DataGrid, ListView, etc. to show filtered data.
- Responsive and adaptive to any mobile devices.
Trusted by the world’s leading companies
Overview
Vue Range Selector is an interface for selecting a small range from a larger collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized.
Data types
Plot any type of data in the range selector using different value types like numeric, date-time, and logarithmic.
Chart Types
Plot data in the range selector with different chart types like line, area, and step line.
Lightweight
Skip the chart and show only the range for selecting data. This makes the range selector lightweight in mobile devices.
Scales
Major and minor scales display the range with different intervals and are placed at multiple levels of the range selector. A date-time scale can also be configured to be shown in major and minor scales.
Period Selector
Select data using predefined periods in the range selector and use the date picker to select a custom range.
Binding selected data
Bind selected data from the range selector to any other data visualization control using built-in events.
Deferred scrolling
Allows you to defer the selected range to be updated until the user stops dragging the scrolling thumbs. This provides a smooth scrolling experience.
Range selection
The range selector control provides the following three ways to select a range:
- Select a range through labels.
- Drag the left and right thumbs.
- Drag the selected range to maintain the same delta.
Customization
All the elements of the range selector are highly customizable with built-in APIs.
Labels
Customize the size, color, font family, font attribute, and alignment of the labels using built-in APIs.
Thumbs
Customize the appearance of the left and right thumbs using built-in APIs.
Gridlines
Customize the color, stroke width, dash array, and visibility of the major and minor gridlines using built-in APIs.
Tooltip
Tooltips display the start and end values of a selected range, allowing users to easily select a required range.
RTL
The range selector supports right-to-left rendering and allows the series and scale direction to be displayed from the right to left. This improves the user experience and accessibility of RTL languages.
Touch and Browser support
The interactive range selector control also support touch interactions.
Touch support
All the features in range selector will work on touch devices with zero configuration. Use the touch features such as tooltip and thumb drag without any customization.
Responsive
You can view the range selector on various devices. It is also possible to hide chart for particular screen sizes by making a very minimal change.
Cross browser support
You can render range selector control in all the modern browsers.
Vue Range Selector Code Example
Easily get started with the Vue Range Selector using a few simple lines of js code as demonstrated below. Also explore ourVue Range Selector Example that shows you how to render and configure the Range Selector in Vue.
<template><divid="app"><ejs-rangenavigator></ejs-rangenavigator></div></template><script>importVuefrom'vue';import{RangeNavigatorPlugin}from'@syncfusion/ej2-vue-charts';Vue.use(RangeNavigatorPlugin);exportdefault{data(){return{}}}</script>
Other supported frameworks
The Range Selector component is also available in Blazor, React, Angular, and JavaScript frameworks. Check out the different Range Selector platforms from the links below,
Not sure how to create your first Range Selector? Our documentation can help.
I’d love to read it now145+ VUE UI COMPONENTS
Our Customers Love Us
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Explore Case StudiesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Transform your applications today by downloading our free evaluation version Download Free TrialNo credit card required.
Documentation
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it.Syncfusion® is proud to hold the following industry awards.
