Range Slider

Overview

The RangeFacet component is an essential tool for filtering products based on a numerical range, such as price or ratings. This interactive slider allows users to select a range between a defined minimum and maximum value, offering a visual and intuitive way to refine search results. Ideal for use cases like price filters or rating ranges, this component enhances the shopping experience by providing users with precise control over their filter settings. With customizable steps, default values, and change handling, this component can be easily tailored to meet the specific needs of your application.

Usage

// importing component
import { RangeFacet } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/rangeFacet.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/rangeFacet.css")

Live Demo

1. Default Dropdown

The facet component is rendered in the form of a dropdown.

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { RangeFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
	<RangeFacet isMultiSlider={true} name="price" defaultOpen={false} renderAs="dropdown" showSelectedFacets={true} />
	<Products />
	...
</UnbxdSearchWrapper>

2. Default Accordion

The facet component is rendered in the form of a accordion.

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { RangeFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
	<RangeFacet isMultiSlider={true} name="price" defaultOpen={false} renderAs="accordion" showSelectedFacets={true} />
	<Products />
	...
</UnbxdSearchWrapper>

Props

• The name of the facet in the feed for which you want to display the component.

• If you want to show the facet as a dropdown or accordion.
• Values: accordion OR dropdown.
• Default Value: accordion.

• Controls whether the facet component can be expanded or collapsed. If disabled, the component will remain open, and users will not be able to collapse it by clicking.
• This is only functional when the facet is rendered as an accordion.
• Default Value: true.

• This setting determines whether the facet component is initially collapsed or open by default.
• This is only functional when the facet is rendered as an accordion and isCollapsible is set to true.
• Default Value: true.

• Enables or disables the label displaying the minimum and maximum values on a range slider.
• Default Value: true

• Controls the visibility of the selected values over the thumb of the slider based on this flag.
• Default Value: true

• If stats is not provided in the extra parameters, this value will be used as the minimum value for the slider.
• Default Value: 0

• If stats is not provided in the extra parameters, this value will be used as the maxmimum value for the slider.
• Default Value: 0

• Controls the visibility of the input boxes.
• Default Value: true

• Determines whether the slider to be rendered will be a single slider or a multi-slider.
• Default Value: true

• By setting a number for this configuration, you define the step increment for the slider. When the user adjusts the slider, the value will change in increments based on this specified step.
• Default Value: 1

• Specifies whether the selected facets for a particular facet name should be displayed within the facets component.
• Default Value: true.

• The component that will be used as the facets component activator. Clicking this will show/hide the facet values.
• Default Value:

const ActivatorComponent = ({ selected, styles }: { selected?: any, styles: any }) => {
	return <div className={styles?.activatorWrapper || defaultSortDropdownProps.styles?.activatorWrapper}>
		<div className={styles?.activatorText || defaultSortDropdownProps.styles?.activatorText}>
			{typeof selected == "object" ? selected.label : "Select"}
		</div>
		<div className={styles?.activatorIcon || defaultSortDropdownProps.styles?.activatorIcon}>
			&#8964;
		</div>
	</div>
}

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	// There is no styles in the component as of now
}}

Related Hook

To use the Unbxd ReactJS SDK without the pre-built FacetsWithButton component, add the functionality to your custom component using the useFacets hook. Refer to the documentation for more details.

Related Components

Button FacetCheckbox FacetRadio Button FacetMultilevel FacetSelected Facets