Aug 13, 2013
Konstantin Volnyagin

Who are you, Mr. Range Selector?

Have you ever heard about range selector widgets? Have you ever seen any range selectors on the web? It may seem that they are rarely used and are even useless, but this would be the wrong assumption to make! The main purpose of the range selector is of course its ability to select a range of values. While this is not a usual web task, I am about to illustrate just how it may be useful.

Imagine you are creating an internet store that is selling cars, for example. There are many cars in the catalog of your internet store and you would like your visitors to be able to quickly scan through your inventory. To this end, we can introduce a filtering capability (by price, popularity and other numeric characteristics). When implementing a price filter, you could create something like this:

Price: $ - $

Let's take a closer look at this approach. Your visitors have the option to enter two values using the keyboard: the lowest and the highest prices to filter with. This approach, however, does not allow the user to see what which are the most expensive or cheapest cars. Nowadays, this is a common practice, but is it the most convenient approach? Let's take a look at the dxRangeSelector widget, provided by the DevExtreme data visualization library, used for the same task:

Using the dxRangeSelector widget you don't need to utilize the keyboard at all, and you can also see the lowest and highest prices, so you won't make a mistake when choosing the right values. I believe that dxRangeSelector is definitely more convenient when it comes to performing filter operations rather than entering two values. With the built-in support for touch operations, the dxRangeSelector widget is a natural choice for touch devices and mobile applications.

Is the dxRangeSelector widget customizable?

The appearance of the dxRangeSelector widget is easily customizable. If you'd like to see the minimal and maximal values, you can toggle the availability of a scale:

Despite the fact that dxRangeSelector is now less compact, it is now more obvious and clear. On the other hand, if you prefer a minimalist appearance, you can get rid of the scale and markers completely:

You can customize everything, including colors and fonts, number formats, various intervals. The dxRangeSelector widget can be used in any web design.

In addition, dxRangeSelector can display charts in the background.

Displayed with a chart, dxRangeSelector allows end-users to get more data about the range to be selected.

Is this all dxRangeSelector can do?

In the previous example, we used dxRangeSelector to filter goods by price. You can easily set it up to filter people by age; to filter movies, articles or news by ratings; you can filter anything that has a numeric presentation.

You may be glad to hear that the dxRangeSelector widget can work with date values too:

We introduced the Scale Markers to display hierarchical time scales in a friendly manner. In the sample above, you can see years and months at once using the Scale Markers. You can also customize the precision of the date values: either by month or by day – just toggle a single setting.

Filtering is not the only purpose of the dxRangeSelector widget. You can combine the dxRangeSelector and dxChart widgets. This is very useful for zooming:

Look at how the dxRangeSelector widget displays the reduced copy of the chart, and how it allows you to quickly choose the desired range in the dxChart widget!

dxRangeSelector – the widget made with love

We created the dxRangeSelector widget from scratch. In the beginning, it was very tiny and didn't have many features. We were training and teaching it something new every day. Once he grew up, it learned what a DateTime is. Then, it learned how to behave correctly on iPad and Android. Sometimes, it didn't want to work correctly. Sometimes, it was displaying critical errors. Sometimes, it made us mad but we didn't stop working with it. We showed the dxChart widget to our dxRangeSelector, and he liked it. All in all, in our hands, it became a great widget.

We are not going to stop working on the dxRangeSelector widget. It will surely find its place in real world projects. It will include more powerful features, such as interaction with categories, be vertical as well as horizontal, because our team is very excited to be working on this innovative widget.

You are welcome to review real-time samples in our Visualization Gallery and more details in our Documentation. As always, we will be glad to hear your valuable input!