Coveo Numeric Facet Slider

Implements the Coveo JavaScript Search Framework FacetSlider component to display a slider widget that lets the user specify the start and end boundaries of a filtering range.

Usage Notes

  • The Sitecore field used as the data source Field value must be included for indexing in the Templates table of the Indexing Manager (see About the Indexing Manager - Fields).

  • Dragging and releasing a facet slider boundary triggers a new Search API call.

Insertion Location

The Coveo Numeric Facet Slider rendering is an Allowed Control in the following placeholder(s): Facets

Example insertion sequence for the Coveo Numeric Facet Slider rendering.

Coveo for Sitecore SXA rendering insertion locations aren’t limited by placeholder Allowed Controls. The Coveo Numeric Facet Slider rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.

Example insertion sequence for the Coveo Numeric Facet Slider rendering.

Data Source Options

Option name Description
Title See title component option
Field See field component option
Facet name See id component option
Allow users to change the slider minimum value See rangeSlider component option
Number of steps See steps component option
Decimal rounded See rounded component option
Display as percentage See displayAsPercent component option
Separator The separator to display (see displayAsValue component option)
Units The units to display (see displayAsValue component option)
Minimum See start component option
Maximum See end component option
Apply filter expression only when slider range is modified See excludeOuterBounds component option
Display graph See graph component option
Graph number of steps See graph component option
DOM unique Id Randomly generated HTML element id.
Additional data attributes Allows use of the Coveo JavaScript Search Framework FacetSlider component options that aren't directly available in the data source.

Sample Generated HTML and Corresponding Visual Output

<div id="coveof5ee1b9f" class="CoveoFacetSlider" data-display-as-percent-enabled="false"
data-display-as-value-unit-sign="$" data-end="500" data-prebind-field="fieldTranslator"
data-field="@saleprice" data-range-slider="true" data-rounded="0" data-start="0"
data-steps="20" data-title="Sale Price Range" data-date-field="false" data-applied-prebind="true">

Numeric Facet Slider sample

Recommended Articles