NumberRangeFacet

Save PDF

Last Updated: May 5, 2026
4 minute read

MarkLogic Server
Documentation

The NumberRangeFacet widget displays a range slider and numeric fields for a faceted numeric property in search results. Users can specify start and end values to constrain their search.

Note:

Users can also constrain a search on numeric values using the BucketRangeFacet widget.

NumberRangeFacet MarkLogic setup

Faceted search in MarkLogic requires a range index on the faceted property. [Add a range index](https://docs.progress.com/bundle/marklogic-server-administrate-12 # This is the version of marklogic. Change this variable when you want links to point to a different version of the docs/page/topics/range-indexes-and-lexicons.html) for a property in the database configuration using the Admin Interface or one of MarkLogic's programmatic APIs. This screenshot shows a path range index being added to the salary property in the Admin Interface:

A path range index is added to the salary property in the Admin Interface.

With an index in place, a constraint can be configured in the [query options](https://docs.progress.com/bundle/marklogic-server-use-search-12 # This is the version of marklogic. Change this variable when you want links to point to a different version of the docs/page/topics/query-options.html) of the search application. This will return facets for the property in the search results. For example:

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

The constraint settings correspond to the settings for the index. return-facets is set to true so that facet results are returned with search results.

This example shows salary facet information returned in the search response:

{
    "snippet-format": "snippet",
    "total": 3,
    "start": 1,
    "page-length": 10,
    "selected": "include",
    "results": [
        {
            "index": 1,
            "uri": "/person/1001.json",
            "path": "fn:doc(\"/person/1001.json\")",
            "score": 0,
            "confidence": 0,
            "fitness": 0,
            "href": "/v1/documents?uri=%2Fperson%2F1001.json",
            "mimetype": "application/json",
            "format": "json",
            "matches": [
                {
                    "path": "fn:doc(\"/person/1001.json\")/object-node()",
                    "match-text": [
                        "person Nerta Hallwood Marketing Manager Active 1985-03-04 104000 person-1001.jpg"
                    ]
                }
            ],
            "extracted": {
                "kind": "array",
                "content": [
                    {
                        "envelope": {
                            "entityType": "person",
                            "id": 1001,
                            "firstName": "Nerta",
                            "lastName": "Hallwood",
                            "title": "Marketing Manager",
                            "status": "Active",
                            "dob": "1985-03-04",
                            "salary": 104000,
                            "image": "person-1001.jpg",
                        }
                    }
                ]
            }
        },
        // ...
    ],
    "facets": {
        "salary": {
            "type": "xs:int",
            "facetValues": [
                {
                    "name": "55000",
                    "count": 1,
                    "value": 55000
                },
                {
                    "name": "87000",
                    "count": 1,
                    "value": 87000
                },
                {
                    "name": "104000",
                    "count": 1,
                    "value": 104000
                }
            ]
        }  
    },
    // ...
}

Example rendering

This example shows the NumberRangeFacet widget. The widget displays a range slider and numeric fields for a faceted salary property. Only documents with a salary property between $55,000 and $70,500 (inclusive) are returned and displayed.

The NumberRangeFacet widget displays both a range slider and numeric fields.

NumberRangeFacet example configuration

This configuration shows the NumberRangeFacet widget imported and configured in a React application:

import { useContext, useState, useEffect } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsSnippet, NumberRangeFacet } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
 
  const [numberVals, setNumberVals] = useState([])
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
 
  const updateNumberRange = (selections) => {
    setNumberVals(selections)
  }
 
  const resetNumberRange = () => {
    context.removeRangeFacetConstraint(numberVals)
    setNumberVals([])
  }
 
  useEffect(() => {
    const debounceTimeout = setTimeout(() => {
      if (numberVals.length !== 0) {
        context.addRangeFacetConstraint(numberVals)
      }
    }, 500)
    return () => {
      clearTimeout(debounceTimeout);
    };
  }, [numberVals]);
  
  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>
            {context?.searchResponse?.facets?.salary &&
              <NumberRangeFacet
                title="Salary"
                data={context?.searchResponse?.facets?.salary}
                name="salary"
                separator={'to'}
                minLabel={'Min'}
                maxLabel={'Max'}
                prefix={"quot;}
                suffix={""}
                minValue={50000}
                maxValue={150000}
                onChange={updateNumberRange}
                resetConfig={{
                  onReset: resetNumberRange
                }}
              />
            }
          </div>
      </div>
    </div>
  );
}
  
export default App;

Code explanation

In the NumberRangeFacet example configuration:

The data prop is set to the numeric facet displayed from the search response object.
The selections information from the NumberRangeFacet widget is stored in a numberVals state variable by the onChange callback. This information is cleared by the onReset callback in the resetConfig prop.
Using a debounceTimeout function avoids unneeded updates to the context object (which results in extra searches on the backend).

See the section Setting and resetting facet widgets.

NumericRangeFacet API

Prop	Type	Description
data	object	Facet data to display from search results.
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.
name	string	The unique key used to identify this facet. Required if `title` is not provided.
separator	string	Separator displayed between the minimum and maximum cards.
minLabel	string	Label for the minimum (start) value.
maxLabel	string	Label for the maximum (end) value.
prefix	string	Optional string to be displayed before the numeric values.
suffix	string	Optional string to be displayed after the numeric values.
containerStyle	CSSProperties	CSS styles applied to the widget.
cardsStyle	CSSProperties	CSS styles applied to the minimum and maximum cards.
ExpansionPanelProps	ExpansionPanelProps	Expansion panel configuration.
step	number	Step by which the number value is incremented/decremented.
minValue	number	Minimum value for the range.
MinInputProps	NumericTextBoxProps	Optional configuration for the minimum facet range input.
maxValue	number	Maximum value for the range.
MaxInputProps	NumericTextBoxProps	Optional configuration for the maximum facet range input.
hideSlider	boolean	Hide the slider component and only show the numeric fields. Default: `false`
onChange	(selection: IRangeFacetSelection[], previousSelection: IRangeFacetSelection[]) => void	Callback function triggered when the range slider values change. It receives two arrays of selection objects, see IRangeFacetSelection API.
resetConfig	({ hide?: boolean; label?: string; ButtonProps?: ButtonProps; onReset?: () => 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	() => 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 DOM element or component instance. See Setting and resetting facet widgets.

IRangeFacetSelection API

This example shows the IRangeFacetSelection objects passed to the onChange callback:

export interface IRangeFacetSelection {
  type: 'number';
  name: string;
  value: number;
  operator: 'GE' | 'LE';
  title: string;
}

Develop with FastTrack

NumberRangeFacet

Table of Contents

NumberRangeFacet

NumberRangeFacet MarkLogic setup

Example rendering

NumberRangeFacet example configuration

Code explanation

Setting and resetting the widget

NumericRangeFacet API

IRangeFacetSelection API