---
title: Coveo Numeric Facet Slider
slug: '3029'
canonical_url: https://docs.coveo.com/en/3029/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Numeric Facet Slider
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.

Implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [FacetSlider](https://coveo.github.io/search-ui/components/facetslider.html) 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](https://docs.coveo.com/en/2566#fields)).

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

* You can [customize the CSS](https://docs.coveo.com/en/2342/) associated with this rendering.

## Insertion location


<div>
<h3>Coveo Hive</h3>
  <p>The <strong>Coveo Numeric Facet Slider</strong> rendering is an Allowed Control in the following placeholder(s): <code class="highlighter-rouge">Facets</code></p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/numeric-facet-slider-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Numeric Facet Slider</strong> rendering.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  <p>Coveo for Sitecore SXA rendering insertion locations aren't limited by placeholder Allowed Controls. The <strong>Coveo Numeric Facet Slider</strong> rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/numeric-facet-slider-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Numeric Facet Slider</strong> rendering.
  </div>
</div>

## Data source options

The following table lists the available data source options for this rendering.

[%header,cols="33%,66%"]
|===
|Option name
|Description

|Title
|See the [title](https://coveo.github.io/search-ui/components/facetslider.html#options.title) component option.

|Field
|See the [field](https://coveo.github.io/search-ui/components/facetslider.html#options.field) component option.

|Facet ID
|See the [id](https://coveo.github.io/search-ui/components/facetslider.html#options.id-1) component option.

|Allow users to change the slider minimum value
|See the [`rangeSlider`](https://coveo.github.io/search-ui/components/facetslider.html#options.rangeslider) component option.

|Number of steps
|See the [steps](https://coveo.github.io/search-ui/components/facetslider.html#options.steps) component option.

|Decimal rounded
|See the [rounded](https://coveo.github.io/search-ui/components/facetslider.html#options.rounded) component option.

|Display as percentage
|See the [displayAsPercent](https://coveo.github.io/search-ui/components/facetslider.html#options.displayaspercent) component option.

|Separator
|The separator to display (see the [displayAsValue](https://coveo.github.io/search-ui/components/facetslider.html#options.displayasvalue) component option).

|Units
|The units to display (see the [displayAsValue](https://coveo.github.io/search-ui/components/facetslider.html#options.displayasvalue) component option).

|Minimum
|See the [start](https://coveo.github.io/search-ui/components/facetslider.html#options.start) component option.

|Maximum
|See the [end](https://coveo.github.io/search-ui/components/facetslider.html#options.end) component option.

|Apply filter expression only when slider range is modified
|See the [excludeOuterBounds](https://coveo.github.io/search-ui/components/facetslider.html#options.excludeouterbounds) component option.

|Display graph
|See the [graph](https://coveo.github.io/search-ui/components/facetslider.html#options.graph) component option.

|Graph number of steps
|See the [graph](https://coveo.github.io/search-ui/components/facetslider.html#options.graph) component option.

|DOM unique ID
a|{empty}
--
Randomly generated HTML element ID.
--

|Additional data attributes
a|{empty}
--
Allows [use of the Coveo JavaScript Search Framework **FacetSlider** component options](https://docs.coveo.com/en/2776/) that aren't directly available in the data source.
--
|===

## Sample generated HTML and corresponding visual output

```html
<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 | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/facet-slider-sample.gif)