Form

RangeSlider

Storybook

An interactive slider that is used to allow users to select a range of values in a given range. It can be used for a variety of purposes on a website, such as filtering results, setting prices or choosing dates.

Import

1import { RangeSlider } from 'dd360-ds'

1import RangeSlider from 'dd360-ds/RangeSlider'

Usage

To use RangeSlider you are required to define the following props:

• min: defines the minimum value of the slider.
• max: Defines the maximum value of the slider.
• onChange: Callback function that will be executed every time the slider value changes. It receives an IRangeSlider object containing the current values of the selected range.

1import { RangeSlider } from 'dd360-ds'
2
3<RangeSlider min='0' max='100' onChange={() => {}} />

Multi

You can have two points on the slider with a simple prop called "multi"

1import { RangeSlider } from 'dd360-ds'
2
3<RangeSlider multi min='0' max='100' onChange={() => {}} />

Bar color

Defines the color of the slider bar. The default value is #1E40AF.

1import { RangeSlider } from 'dd360-ds'
2
3<RangeSlider barColor='#ff0000' min='0' max='100' onChange={() => {}} />

Size

Defines the size of the button that selects the ranges. Possible values are "small", "medium", and "large". Default is "small".

1import { RangeSlider } from 'dd360-ds'
2
3<RangeSlider size='small' min='0' max='100' onChange={() => {}} />
4<RangeSlider size='medium' min='0' max='100' onChange={() => {}} />
5<RangeSlider size='large' min='0' max='100' onChange={() => {}} />

Size Bar

Defines the size of the slider bar. Possible values are "small", "medium", and "large". Default is "small".

1import { RangeSlider } from 'dd360-ds'
2
3<RangeSlider sizeBar='small' min='0' max='100' onChange={() => {}} />
4<RangeSlider sizeBar='medium' min='0' max='100' onChange={() => {}} />
5<RangeSlider sizeBar='large' min='0' max='100' onChange={() => {}} />

API Reference