RangeFacet

Primitive UI components in Search UI Components package, are headless, building blocks used to create the headless widget templates for React applications. You can use them to scaffold your custom widgets.

This topic describes the anatomy, API reference, and variations of the RangeFacet primitive component.

Anatomy

For a complete implementation, put together parts of the UI component as shown in the following code block.

import { RangeFacet } from '@sitecore-search/ui';

const MyRangeSliderComponent = () => (
  <RangeFacet.Root>
    <RangeFacet.Track>
      <RangeFacet.Range />
    </RangeFacet.Track>
    <RangeFacet.Start />
    <RangeFacet.End />
  </RangeFacet.Root>
);

Using the component

This section describes use of the RangeFacet primitive component. You can copy and paste the code blocks into your React application.

Screenshot of a plain RangeFacet primitive component.

() => {
  const { StyledRoot, AccordionTrigger, FacetStyled, StyledThumb, StyledStart, StyledEnd, StyledRange, StyledTrack } =
    buildStoryComponents();

  return (
    <>
      <AccordionFacets.Root>
        <FacetStyled facetId="facetId3">
          <AccordionTrigger>Price</AccordionTrigger>
          <AccordionFacets.Content>
            <StyledRoot defaultValue={DEFAULT_VALUE} min={0} max={100} steps={1}>
              <StyledTrack>
                <StyledRange />
              </StyledTrack>
              <StyledStart>{(value) => <span>{value}</span>}</StyledStart>
              <StyledEnd>{(value) => <span>{value}</span>}</StyledEnd>
            </StyledRoot>
          </AccordionFacets.Content>
        </FacetStyled>
      </AccordionFacets.Root>
    </>
  );
}

API Reference

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

Components to which you can add it as a child.
Components you can add as its child.
Details of any properties you can set.

RangeFacet.Root

The RangeFacet.Root component contains all the parts of an accordion.

Name	Description
`children`	The children inner to the `RangeFacet.Root` component
`min`	Number The minimum value that the slider can support.
`max`	Number The maximum value that the slider can support.
`defaultValue`	Array of numbers. The value of the slider when initially rendered.
`steps`	Number The stepping interval.
`autoAdjustValues`	Boolean Default: `true` Adjust the limits according to min and max values

RangeFacet.Track

The RangeFacet.Track component contains the RangeFacet.Range.

RangeFacet.Range

The range part. Must live inside RangeFacet.Track.

RangeFacet.Start

The RangeFacet.Start is the draggable thumb for the starting point. Receives a function that has the value as parameter and returns the layout content.

<RangeFacet.Start>{(value) => <span>{value}</span>}</RangeFacet.Start>

RangeFacet.End

The RangeFacet.End is the draggable thumb for the end point. Receives a function that has the value as parameter and returns the layout content.

<RangeFacet.End>{(value) => <span>{value}</span>}</RangeFacet.End>

If you have suggestions for improving this article, let us know!