Menu


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  max={100}
8  min={0}
9/>
10

Min & max
min

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

max

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

initMinValue

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.

initMaxValue

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.

minValDisabled

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.

maxValDisabled

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/>
11
12


API Reference
NameTypesDefault
"title"
string
-
"min"
number
0
"max"
number
999999999
"initMinValue"
number
-
"initMaxValue"
number
-
"minValDisabled"
boolean
-
"maxValDisabled"
boolean
-
"className"
string
-
"width"
string
-
"unitName"
string
Km
"textApplyBtn"
string
Apply
"textResetBtn"
string
Reset
"onApply"
function
-
"onReset"
function
-

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

Filter RangeFilter Date