---
title: Request specific facet range values
slug: '2790'
canonical_url: https://docs.coveo.com/en/2790/
collection: javascript-search-framework
source_format: adoc
---
# Request specific facet range values
When configuring a [`FacetRange`](https://coveo.github.io/search-ui/components/facetrange.html) (or [`DynamicFacetRange`](https://coveo.github.io/search-ui/components/dynamicfacetrange.html)) component, you can use the [`ranges`](https://coveo.github.io/search-ui/components/facetrange.html#options.ranges) option to request specific range values instead of letting the [index](https://docs.coveo.com/en/204/) automatically generate range values.
> **Notes**
>
> * You can only request range values for numeric and date [fields](https://docs.coveo.com/en/200/) (for example, `@size`, `@date`, etc.).
> * You can request overlapping range values (for example, `0..100` and `50..100`).
> * The index can't automatically generate range values for dynamic fields resulting from [query functions](https://docs.coveo.com/en/232/).
> In such a case, you _must_ use the `ranges` option.
> * Automatic range generation isn't currently supported by the pilot `DynamicFacetRange` component.
Consider the following markup configuration:
```html
```
* You can request specific `ranges` for these two `FacetRange` components by passing arrays of [`IRangeValue`](https://coveo.github.io/search-ui/interfaces/irangevalue.html) in the [`init`](https://coveo.github.io/search-ui/globals.html#init) (or [`options`](https://coveo.github.io/search-ui/globals.html#options)) call of your search interface (see [Configuring Components](https://docs.coveo.com/en/346#configuring-components)).
```javascript
document.addEventListener("DOMContentLoaded", () => {
const myNumericRanges = [
{ start: 0, end: 1000, endInclusive: true, label: "0 - 1,000" },
{ start: 1001, end: 5000, endInclusive: true, label: "1,001 - 5,000" },
{ start: 5001, end: 10000, endInclusive: true, label: "5,001 - 10,000" }
];
const myDateRanges = [
{ start: "2017-01-01", end: "2017-12-31" },
{ start: "2018-01-01", end: "2018-12-31" },
{ start: "2019-01-01", end: "2019-12-31" }
];
const root = Coveo.$$(document).find("#search")
Coveo.SearchEndpoint.configureSampleEndpointV2();
Coveo.init(root, {
fileSizeFacetRange: { ranges: myNumericRanges },
lastUpdatedFacetRange: { ranges: myDateRanges }
});
});
```
* You can also pass dynamically evaluated values.
```javascript
document.addEventListener("DOMContentLoaded", () => {
function getISODateString(baseDate, offset={year: 0, month: 0, date: 0}) {
let offsetDate = new Date(baseDate);
offsetDate.setUTCFullYear(baseDate.getUTCFullYear() + offset.year);
offsetDate.setUTCMonth(baseDate.getUTCMonth() + offset.month);
offsetDate.setUTCDate(baseDate.getUTCDate() + offset.date);
return offsetDate.toISOString();
}
const now = new Date();
const myDateRanges = [
{
start: getISODateString(now, { year: -5, month: 0, date: 0 }),
end: getISODateString(now),
label: "In the last 5 year"
},
{
start: getISODateString(now, { year: 0, month: -6, date: 0 }),
end: getISODateString(now),
label: "In the last 6 months"
},
{
start: getISODateString(now, { year: 0, month: 0, date: -14 }),
end: getISODateString(now),
label: "In the last 2 weeks"
}
];
const root = Coveo.$$(document).find("#search")
Coveo.SearchEndpoint.configureSampleEndpointV2();
Coveo.init(root, {
lastUpdatedFacetRange: { ranges: myDateRanges }
});
});
```
> **Note**
>
> If you only want to output a set of standard dynamic date values (that is, all dates, within last day, withing last week, within last month, and within last year), consider using the [`TimespanFacet`](https://coveo.github.io/search-ui/components/timespanfacet.html) component instead.
* Rather than specifying a `ranges` array in the `init` (or `options`) call of your search interface, you can pass a JSON string directly in the component markup configuration.
While this approach is arguably simpler, it doesn't support dynamically evaluated values.
```html
```