RangeFacet

Save PDF

Last Updated: May 5, 2026
4 minute read

MarkLogic Server
Documentation

The RangeFacet widget allows users to filter search results by entering numeric or date range conditions. Users select a comparison operator (such as "Greater than" or "Between") and enter one or two values to build a constraint. Multiple conditions can be added simultaneously.

Note:

The BucketRangeFacet widget can also be used to constrain search results for a faceted numeric property using pre-defined bucket ranges.

MarkLogic setup

Faceted search requires a range index on the faceted property. A range index can be added to the database configuration with the MarkLogic Admin Interface or with an API.

After an index is added, a faceted constraint must be configured using query options. In this example, the search application returns facets for the /envelope/salary property in the search results. return-facets is set to true so that facet results are returned:

<?xml version="1.0" encoding="UTF-8"?>
<options xmlns="http://marklogic.com/appservices/search">
  <constraint name="salary">
    <range collation="" facet="true" type="xs:int">
      <path-index>/envelope/salary</path-index>
      <facet-option>limit=25</facet-option>
    </range>
  </constraint>
  <return-facets>true</return-facets>
</options>

Unlike bucketed facets, the RangeFacet does not require pre-defined bucket ranges — it accepts free-form values from the user and builds the appropriate constraint at query time.

Example rendering

The RangeFacet widget displays a condition builder. Each condition row contains an operator dropdown (e.g., "Greater than or equal to") and a numeric or date input field. When the "Between" operator is selected, a second input field appears for the upper bound. An "Add condition" button allows adding more conditions, and each condition has a remove button.

RangeFacet example configuration

In this example configuration, the RangeFacet widget is imported and configured in a React application for the salary filter.

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsSnippet, RangeFacet } from "ml-fasttrack";

function App() {

  const context = useContext(MarkLogicContext);

  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }

  const handleRangeChange = (selections, previousSelections, conditions) => {
    // Remove previous constraints and apply new ones
    previousSelections.forEach(c => context.removeRangeFacetConstraint(c));
    selections.forEach(c => context.addRangeFacetConstraint(c));
  }

  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div style={{display: 'flex', flexDirection: 'row'}}>
        <div style={{width: '640px'}}>
          <ResultsSnippet
            results={context.searchResponse.results}
            paginationFooter={true}
          />
        </div>
        <div>
          <RangeFacet
            title="Salary"
            name="salary"
            valueType="number"
            prefix="quot;
            defaultOperator="GE"
            operators={['GE', 'LE', 'EQ', 'BETWEEN']}
            onChange={handleRangeChange}
            containerStyle={{ width: '320px' }}
          />
        </div>
      </div>
    </div>
  );
}

export default App;

Code explanation

In the RangeFacet example configuration:

The valueType prop determines whether the inputs accept numbers or dates.
The operators prop restricts which comparison operators are available in the dropdown.
The defaultOperator sets the pre-selected operator when a new condition row is added.
The onChange callback receives the current and previous Constraint arrays, allowing the application to replace old constraints with new ones. The raw conditions array is also provided for display purposes.
The prefix prop prepends a symbol (e.g., $) to the input fields.

See the section Setting and resetting facet widgets.

RangeFacet API

Prop	Type	Description
name	string	The unique key used to identify this facet. Required if `title` is not provided.
title	string	Title for the collapsible header. If not provided, `name` will be used as the facet key.
subTitle	string	Subtitle for the collapsible header.
containerStyle	CSSProperties	CSS styles applied to the widget container.
valueType	'number' \| 'date'	The type of values this facet handles. Default: `'number'`.
onChange	(selections: Constraint[], previousSelections: Constraint[], conditions: IRangeFacetCondition[]) => void	Callback triggered when the facet value changes. Receives the current and previous constraint arrays, plus the raw condition objects.
operators	('LT' \| 'LE' \| 'GT' \| 'GE' \| 'EQ' \| 'BETWEEN')[]	List of operators available for selection. Default: all operators.
operatorLabels	Partial<Record<RangeFacetOperator, string>>	Custom display labels for operators. Overrides the built-in labels.
defaultOperator	'LT' \| 'LE' \| 'GT' \| 'GE' \| 'EQ' \| 'BETWEEN'	The default operator selected when adding a new condition. Default: `'GE'`.
allowMultiple	boolean	Whether to allow multiple conditions. Default: `true`.
maxConditions	number	Maximum number of conditions allowed. Only applies when `allowMultiple` is `true`. Default: unlimited.
defaultConditions	IRangeFacetCondition[]	Initial conditions to pre-populate the facet with.
primaryInputConfig	IRangeFacetInputConfig	Configuration for the primary input field (label, min, max, step, format, placeholder, and additional KendoReact props).
secondaryInputConfig	IRangeFacetInputConfig	Configuration for the secondary input field used with the BETWEEN operator.
operatorDropdownConfig	{ label?: string; style?: CSSProperties; props?: Partial<DropDownListProps> }	Configuration for the operator dropdown (label, custom styles, and additional KendoReact DropDownList props).
showAddButton	boolean	Whether to show the Add Condition button. Applies only when `allowMultiple` is `true`. Default: `true`.
addButtonLabel	string	Label for the Add Condition button. Default: `'Add condition'`.
showRemoveButton	boolean	Whether to show the Remove button for each condition. Default: `true`.
prefix	string \| ReactNode	Prefix displayed before input values (e.g., `'` `#39;`).
suffix	string \| ReactNode	Suffix displayed after input values (e.g., `'USD'`).
dateFormat	string	Format string for date values. Default: `'yyyy-MM-dd'`.
validate	(conditions: IRangeFacetCondition[]) => IRangeFacetValidationError[]	Custom validation function. Returns an array of validation errors or an empty array if valid.
removeAccordion	boolean	When `true`, the component is not wrapped in a collapsible panel. Default: `false`.
ExpansionPanelProps	ExpansionPanelProps	Expansion panel configuration.
resetConfig	({ hide?: boolean; label?: string; ButtonProps?: ButtonProps; onReset?: (currentSelections, conditions) => void; })	Applies a Reset button to the bottom of the component.
resetConfig.hide	boolean	Whether to hide the Reset button.
resetConfig.label	string	The Reset button label.
resetConfig.ButtonProps	ButtonProps	KendoReact Button props for the Reset button.
resetConfig.onReset	(currentSelections: Constraint[], conditions: IRangeFacetCondition[]) => void	Callback function triggered when the user clicks the Reset button.
ref	const facetRef = useRef(null);	A React ref object that can be used to access the underlying component instance. See Setting and resetting facet widgets.

Develop with FastTrack

RangeFacet

Table of Contents

RangeFacet

MarkLogic setup

Example rendering

RangeFacet example configuration

Code explanation

Setting and resetting the widget

RangeFacet API