Ecme - The Ultimate Next & TypeScript Web Template

Slider

Slider is used to select a value within a range.

Basic

Basic usage of Slider.

Range

Basic usage of Range Slider.

Disabled

Make Slider inactive by setting the disabled prop.

Marks

Slider can have marks under the bar using marks prop.

$20,000

$50,000

$80,000

Step

step prop allows you to control the increment value when dragging the slider, it determines how the slider moves across different consistent values & stepOnMarks prop allows you to move slider across different inconsistent values

0°C

25°C

50°C

75°C

100°C

0°C

26°C

37°C

100°C

Min and Max

By default, the slider has a minimum value of 0 and a maximum value of 100. min and max props allow you to set a custom minimum and maximum values of the slider.

Custom Color

We can customize the color of the slider using classNames props, applying classes to different parts of the slider.

Controlled

Controlled usage with <Slider />

Slider value: 50

Range slider value: [20,50]

API

Slider

Prop	Description	Type	Default
alwaysShowTooltip	Whether to showing tooltip all the time	`boolean`	-
classNames	Class name for each part of slider	`classNames?: { thumb?: string; bar?: string; mark?: string \| ((isFilled: boolean) => string); track?: string }`	-
defaultValue	Default value of Slider (use value instead if it is controlled)	`number`	-
disabled	Whether to disable Slider	`boolean`	-
inputProps	Props for input element that behind the slider	`React.ComponentPropsWithoutRef<'input'>`	-
marks	Marks metadata show under the bar	`{ value: number; label?: ReactNode \| string }[]`	-
max	Maximum value of Slider	`number`	`100`
min	Minimum value of Slider	`number`	`0`
name	Name of input element that behind the slider	`string`	-
onChange	Callback when Slider value changed	`(value: number) => void`	-
onDraggingStop	Callback when dragging stop	`(value: number) => void`	-
precision	Precision of Slider value	`number`	`-`
showTooltipOnHover	Whether to show tooltip when hover	`boolean`	`false`
step	Increment value when dragging the slider	`number`	`1`
stepOnMarks	Whether to move slider across different inconsistent step values	`boolean`	`false`
thumbAriaLabel	Aria label of slider thumb	`string`	-
tooltip	Custom tooltip value of slider	`ReactNode \| ((value: number) => ReactNode)`	-
value	Value of Slider	`number`	-

Slider.Range

Prop	Description	Type	Default
alwaysShowTooltip	Whether to showing tooltip all the time	`boolean`	-
defaultValue	Default value of Range Slider (use value instead if it is controlled)	`number`	-
disabled	Whether to disable Range Slider	`boolean`	-
inputProps	Props for input element that behind the slider	`React.ComponentPropsWithoutRef<'input'>`	-
marks	Marks metadata show under the bar	`{ value: number; label?: ReactNode \| string }[]`	-
max	Maximum value of Range Slider	`number`	`100`
maxRange	Maximum range interval of Range Slider	`number`	-
min	Minimum value of Range Slider	`number`	`0`
minRange	Minimum range interval of Range Slider	`number`	`0`
name	Name of input element that behind the slider	`string`	-
precision	Precision of Range Slider value	`number`	`-`
onChange	Callback when Range Slider value changed	`(values: [number, number]) => void`	-
onDraggingStop	Callback when dragging stop	`(values: [number, number]) => void`	-
showTooltipOnHover	Whether to show tooltip when hover	`boolean`	`false`
step	Increment value when dragging the slider	`number`	`1`
stepOnMarks	Whether to move slider across different inconsistent step values	`boolean`	`false`
thumbAriaLabelStart	Aria label of start slider thumb	`string`	-
thumbAriaLabelEnd	Aria label of end slider thumb	`string`	-
tooltip	Custom tooltip value of slider	`ReactNode \| ((value: [number, number]) => ReactNode)`	-
value	Value of Range Slider	`[number, number]`	-

Prop

Description

Type

Default

alwaysShowTooltip

Whether to showing tooltip all the time

boolean

classNames

Class name for each part of slider

classNames?: { thumb?: string; bar?: string; mark?: string | ((isFilled: boolean) => string); track?: string }

defaultValue

Default value of Slider (use value instead if it is controlled)

number

disabled

Whether to disable Slider

boolean

inputProps

Props for input element that behind the slider

React.ComponentPropsWithoutRef<'input'>

marks

Marks metadata show under the bar

{ value: number; label?: ReactNode | string }[]

max

Maximum value of Slider

number

100

min

Minimum value of Slider

number

0

name

Name of input element that behind the slider

string

onChange

Callback when Slider value changed

(value: number) => void

onDraggingStop

Callback when dragging stop

(value: number) => void

precision

Precision of Slider value

number

-

showTooltipOnHover

Whether to show tooltip when hover

boolean

false

step

Increment value when dragging the slider

number

1

stepOnMarks

Whether to move slider across different inconsistent step values

boolean

false

thumbAriaLabel

Aria label of slider thumb

string

tooltip

Custom tooltip value of slider

ReactNode | ((value: number) => ReactNode)

value

Value of Slider

number

Prop

Description

Type

Default

alwaysShowTooltip

Whether to showing tooltip all the time

boolean

defaultValue

Default value of Range Slider (use value instead if it is controlled)

number

disabled

Whether to disable Range Slider

boolean

inputProps

Props for input element that behind the slider

React.ComponentPropsWithoutRef<'input'>

marks

Marks metadata show under the bar

{ value: number; label?: ReactNode | string }[]

max

Maximum value of Range Slider

number

100

maxRange

Maximum range interval of Range Slider

number

min

Minimum value of Range Slider

number

0

minRange

Minimum range interval of Range Slider

number

0

name

Name of input element that behind the slider

string

precision

Precision of Range Slider value

number

-

onChange

Callback when Range Slider value changed

(values: [number, number]) => void

onDraggingStop

Callback when dragging stop

(values: [number, number]) => void

showTooltipOnHover

Whether to show tooltip when hover

boolean

false

step

Increment value when dragging the slider

number

1

stepOnMarks

Whether to move slider across different inconsistent step values

boolean

false

thumbAriaLabelStart

Aria label of start slider thumb

string

thumbAriaLabelEnd

Aria label of end slider thumb

string

tooltip

Custom tooltip value of slider

ReactNode | ((value: [number, number]) => ReactNode)

value

Value of Range Slider

[number, number]

Slider

Basic

Range

Disabled

Tooltips

Marks

Step

Min and Max

Custom Color

Controlled

API

Slider

Slider.Range

TABLE OF CONTENT

Slider

Basic

Range

Disabled

Tooltips

Marks

Step

Min and Max

Custom Color

Controlled

API

Slider

Slider.Range

TABLE OF CONTENT