Components

Filter Range

Storybook

The FilterRange component allows users to filter a range of numeric values in an application. It has two numeric inputs for entering a minimum and maximum value, and can activate callback functions on both the "apply" and "reset" buttons.

Imports

1import { FilterRange } from 'dd360-ds'

Usage

Use the FilterRange component as shown below:

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

1import { FilterRange } from 'dd360-ds''
2
3<FilterRange
4  onApply={() => console.log('Apply function')}
5  onReset={() => console.log('Reset function')}
6  title="Filter range name"
7/>
8

Min & max

The "min" and "max" values are used to set boundaries for the selected range, while the "defaultMin" and "defaultMax" values are used to set the initial values of the range when the FilterRange component is first opened. If the user enters a value that is outside the specified range, an alert will be displayed when they click the "Apply" button. It is recommended to set sensible values for "min" and "max" to avoid confusing the user. Also you can use the textMin and textMax properties to set a custom text in the FilterRange.

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

1import { FilterRange } from 'dd360-ds'
2
3<FilterRange
4  max={100}
5  min={30}
6  onApply={() => undefined}
7  onReset={() => undefined}
8  title="Filter range name"
9  defaultMax={100}
10  defaultMin={30}
11  textMax='Custom max text'
12  textMin='Custom min text'
13/>
14
15 

API Reference

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