Components

Filter Range Slider

Storybook

FilterRangeSlider is a customizable component that provides a multi-range slider for filtering numeric values. The component displays a dialog box that allows users to set a minimum and maximum value range, and includes an "apply" and "reset" button to submit or clear the values.

Imports

1import { FilterRangeSlider } from 'dd360-ds'

Usage

To use the FilterRangeSlider component, import it into your React application and include it in your JSX code. The component takes a set of props to customize its behavior and appearance.

The code snippet below shows how to use the FilterRange component:

1import { FilterRange } from 'dd360-ds''
2
3<FilterRangeSlider
4  title="Filter range slider name"
5  onApply={() => undefined}
6  onReset={() => undefined}
7  position={{
8      top: -160,
9      left: 0,
10      show: true
11  }}
12  max={100}
13  min={0}
14/>
15

Visibility & position

To manage the FilterRangeSlider component's visibility and position, you can use the useState hook in a functional component. Position stores the top and left coordinates, as well as a boolean indicating whether the component should be shown. The component listens for clicks on a button, which toggles the FilterRangeSlider's visibility and updates its position based on the click event's coordinates.

The code snippet below shows how to handle the visibility and position:

1import { FilterRangeSlider } from 'dd360-ds'
2
3const FilterComponent = () => {
4  const [domLoaded, setDomLoaded] = useState<boolean>(false)
5  const [position, setPosition] = useState<{
6    top: number
7    left: number
8    show: boolean
9  }>({
10    top: 0,
11    left: 0,
12    show: false
13  })
14
15useEffect(() => { setDomLoaded(true) }, [])
16
17return (
18    <>
19      {domLoaded && (
20        <div>
21          <button
22            className="flex items-center gap-1"
23            onClick={(event) => {
24              setPosition((position) => ({
25                top: event.pageY,
26                left: event.pageX,
27                show: !position.show
28              }))
29            }}
30          >
31            <Text size="lg" bold>
32              Filter range on top
33            </Text>
34            <DynamicHeroIcon icon="FilterIcon" className="w-4 h-4" />
35          </button>
36          <FilterRangeSlider
37            title="Filter range slider name"
38            onApply={() => undefined}
39            onReset={() => undefined}
40            max={100}
41            min={0}
42            position={{
43              top: position.top - 160,
44              left: position.left,
45              show: position.show
46            }}
47          />
48        </div>
49      )}
50    </>
51  )
52}
53
54export default FilterComponent
55 

Note: The "domLoaded" state variable in the FilterComponent is used to ensure that the component is fully rendered before displaying the FilterRangeSlider component. This is important when using Next.js, as it performs server-side rendering by default. By waiting for the client-side rendering to complete, we can avoid any issues with the FilterRangeSlider component not being fully initialized.

Min & max

Represents the minimum value that can be selected in the range slider. It defaults to 0.

Represents the maximum value that can be selected in the range slider. It defaults to 999999999.

Represents the initial minimum value that will be set in the range slider. If it's not provided, then it will default to the min prop.

Represents the initial maximum value that will be set in the range slider. If it's not provided, then it will default to the max prop.

Is a boolean value that determines whether the minimum value input field will be disabled or not. If it's set to true, the minimum input field will be disabled and the user will not be able to change its value. It defaults to false.

Is a boolean value that determines whether the maximum value input field will be disabled or not. If it's set to true, the maximum input field will be disabled and the user will not be able to change its value. It defaults to false.

The code snippet below shows how to set a minimum and maximum value and disable the minimum value:

1import { FilterRangeSlider } from 'dd360-ds'
2
3<FilterRangeSlider
4  title="Filter range slider name"
5  onApply={() => undefined}
6  onReset={() => undefined}
7  max={minMax ? 300 : 100}
8  min={minMax ? 150 : 0}
9  minValDisabled={true}
10  position={{
11    top: -160,
12    left: 0,
13    show: true
14  }}
15/>
16
17 

API Reference

Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.