Part 7: Working with Ranges in the Search Refiner Control

December 10, 2013

This is an extra post for the search refiner control series. In this post I'll explain how you could build a search refiner control that makes use of ranges.

The range operator can be used for the following search data types:

  • DateTime
  • Decimal
  • Integer

The out-of-the-box refiner controls use this range operator for its slider controls, but it can easily be used within your custom refiner.

First let me explain the range operator.

Range operator

The range operator requires minimal two values, a start and an end value (Range Operator).

range(start, end)

It's also possible to apply two optional parameters, an open and close start or end interval.

range(start, stop [,from="GE"|"GT"] [,to="LE"|"LT"])

With these optional start and end interval parameters, you could specify to include or exclude the start / end values.


  • GE: Greater than or equal to the start value; This includes the start value (Default);
  • GT: Greater than the start value. This excludes the start value.


  • LE: Less than or equal to the end value; This includes the end value (Default);
  • LT: Less than the end value. This excludes the end value.

The range operator can be used with numeric values (integer and decimal) and DateTime values. There are two important things were you should pay attention for:

  1. When using the range operator for DateTime refinement, you should format the dates in ISO format "2013-11-01T00:01:01Z".
  2. When using the range operator for Decimal refinement, you should let the range operator know that it's a decimal value. This can be done by using the decimal operator "decimal(10.10)".

Another useful thing, if you don't want to specify a lower or upper bound, you could use the min or max reserved words as value.





Creating Your Own Range Search Refiner Control

Now that you got a little bit of background information about how the range operator works, it's time to build our own range search refinement control.

The end result will look like this:

Range End Result

Range End Result

For this search refiner we'll start from scratch, because the code will be much different than the ones that were created in the previous posts.

The starter's template looks like this:

In this starter's template you'll find the CompatibleSearchDataTypes property, this property specifies for which kind of search data types that the control can be used. In this control the property is set to be used for DateTime, Integer, and Decimal search data types.

Next step is to create the ID variables for the elements that will be used, and the default refinement control classes.

Now that the variables are created, you can add the HTML mark-up for the refiner. This looks like this:

The output after this will look the same as the end result, but without the functionality.

Range Refiner

Range Refiner

Adding the Click Events to the Hyperlinks

For the refinement and clear hyperlinks, we'll add click events via JavaScript. This needs to be done from the moment the search refinement control is loaded. This can be done by using the ctx.OnPostRender functionality.

Showing the Refiner Values in the Input Fields

The last step is to show the used refiner values in the input fields after you refined the results. Right now when you do a refinement, the input fields will get cleared.

To add this kind of functionality, we'll have to retrieve these values from the current refinement category that is in place. This can be done the same way as explained in the previous post (multi-value search refiner control).

This code needs to be added just before the HTML mark-up. The refinement values (start and end) that it retrieves will be stored in the from and to variables, and can be used for the input field values by adding a value attribute to the fields.


The end result looks like this:

Range Refiner

Range Refiner


This is the complete Range Search Refiner Control Template: Range Search Refiner Control

Blog posts in this series: