Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

RangeSlider

RangeSlider is a component used for users to select a range of related values.

Source@yamada-ui/slider

Props

RangeSliderProps

betweenThumbs

Description

The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.

Type

number

Default

0

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Default

"primary"

defaultValue

Description

The initial value of the slider.

Type

[number, number]

disabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

filledTrackColor

Description

The CSS color property. Used in color of filled track element.

Type

UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">

filledTrackProps

Description

Props for range slider filled track element.

Type

RangeSliderFilledTrackProps

focusThumbOnChange

Description

If false, the slider handle will not capture focus when value changes.

Type

boolean

Default

true

getAriaValueText

Description

This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the aria-valuetext property of the input.

Type

(value: number) => string | undefined

id

Description

The base id to use for the slider.

Type

string

inputProps

Description

Props for range slider input element.

Type

HTMLUIProps<"input">

invalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isInvalid

Deprecated

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

isReadOnly

Deprecated

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

isRequired

Deprecated

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

isReversed

Deprecated

Description

If true, the value will be incremented or decremented in reverse.

Deprecated

Use reversed instead.

Type

boolean

max

Description

The maximum allowed value of the slider. Cannot be less than min.

Type

number

Default

100

min

Description

The minimum allowed value of the slider. Cannot be greater than max.

Type

number

Default

0

name

Description

The name attribute of the hidden input field. This is particularly useful in forms.

Type

string | [string, string]

onChange

Description

Function called whenever the slider value changes.

Type

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

onChangeEnd

Description

Function called when the user is done selecting a new value.

Type

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

onChangeStart

Description

Function called when the user starts selecting a new value.

Type

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

orientation

Description

The orientation of the slider.

Type

"horizontal" | "vertical"

Default

'horizontal'

readOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

required

Description

If true, the form control will be required.

Type

boolean

Default

false

reversed

Description

If true, the value will be incremented or decremented in reverse.

Type

boolean

size

Description

The size of the RangeSlider.

Type

"sm" | "md" | "lg"

Default

"md"

step

Description

The step in which increments or decrements have to be made.

Type

number

Default

1

thumbColor

Description

The CSS background property. Used in background of thumb element.

Type

UIValue<"border" | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | ... 318 more ... | Background<...>>

thumbProps

Description

Props for range slider thumb element.

Type

RangeSliderThumbProps

thumbSize

Description

The CSS box-size property. Used for calculating the width, height, and percentage of the container element.

Type

UIValue<number | "px" | "max" | "min" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 75 more ... | "xs">

trackColor

Description

The CSS color property. Used in color of track element.

Type

UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">

trackProps

Description

Props for range slider track element.

Type

RangeSliderTrackProps

trackSize

Description

The CSS height property. Used in height of track element.

Type

UIValue<number | "px" | "max" | "min" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 71 more ... | "xs">

value

Description

The value of the slider.

Type

[number, number]

variant

Description

The variant of the RangeSlider.

Type

string

Edit this page on GitHub

PreviousSliderNextHueSlider