Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

RangeSlider

RangeSliderは、ユーザーが関連する値の範囲を選択するために使用されるコンポーネントです。

ソース@yamada-ui/slider

Props

RangeSliderProps

betweenThumbs

説明

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

タイプ

number

デフォルト

0

colorScheme

説明

The visual color appearance of the component.

タイプ

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

デフォルト

primary

defaultValue

説明

The initial value of the slider.

タイプ

[number, number]

filledTrackColor

説明

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

タイプ

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

filledTrackProps

説明

Props for range slider filled track element.

タイプ

RangeSliderFilledTrackProps

focusThumbOnChange

説明

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

タイプ

boolean

デフォルト

true

id

説明

The base id to use for the slider.

タイプ

string

inputProps

説明

Props for range slider input element.

タイプ

HTMLUIProps<"input">

isDisabled

説明

If true, the form control will be disabled.

タイプ

boolean

デフォルト

false

isInvalid

説明

If true, the form control will be invalid.

タイプ

boolean

デフォルト

false

isReadOnly

説明

If true, the form control will be readonly.

タイプ

boolean

デフォルト

false

isRequired

説明

If true, the form control will be required.

タイプ

boolean

デフォルト

false

isReversed

説明

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

タイプ

boolean

max

説明

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

タイプ

number

デフォルト

100

min

説明

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

タイプ

number

デフォルト

0

name

説明

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

タイプ

string | [string, string]

onChange

説明

Function called whenever the slider value changes.

タイプ

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

onChangeEnd

説明

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

タイプ

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

onChangeStart

説明

Function called when the user starts selecting a new value.

タイプ

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

orientation

説明

The orientation of the slider.

タイプ

"horizontal" | "vertical"

デフォルト

'horizontal'

size

説明

The size of the RangeSlider.

タイプ

"sm" | "md" | "lg"

デフォルト

md

step

説明

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

タイプ

number

デフォルト

1

thumbColor

説明

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

タイプ

UIValue<"border" | "link" | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | ... 319 more ... | Background<...>>

thumbProps

説明

Props for range slider thumb element.

タイプ

RangeSliderThumbProps

thumbSize

説明

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

タイプ

UIValue<number | (string & {}) | "px" | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 73 more ... | "9xl">

trackColor

説明

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

タイプ

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

trackProps

説明

Props for range slider track element.

タイプ

RangeSliderTrackProps

trackSize

説明

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

タイプ

UIValue<number | (string & {}) | "px" | "min" | "max" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 69 more ... | "9xl">

value

説明

The value of the slider.

タイプ

[number, number]

variant

説明

The variant of the RangeSlider.

タイプ

string

GitHubでこのページを編集する

SliderHueSlider