betweenThumbs
説明
The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
タイプ
numberデフォルト
0RangeSlider
RangeSliderは、ユーザーが関連する値の範囲を選択するために使用されるコンポーネントです。
Props
RangeSliderProps
colorScheme
説明
The visual color appearance of the component.
タイプ
"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"デフォルト
"primary"defaultValue
説明
The initial value of the slider.
タイプ
[number, number]disabled
説明
If true, the form control will be disabled.
タイプ
booleanデフォルト
falsefilledTrackColor
説明
The CSS color property. Used in color of filled track element.
タイプ
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
説明
Props for range slider filled track element.
タイプ
RangeSliderFilledTrackPropsfocusThumbOnChange
説明
If false, the slider handle will not capture focus when value changes.
タイプ
booleanデフォルト
truegetAriaValueText
説明
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.
タイプ
(value: number) => string | undefinedid
説明
The base id to use for the slider.
タイプ
stringinputProps
説明
Props for range slider input element.
タイプ
HTMLUIProps<"input">invalid
説明
If true, the form control will be invalid.
タイプ
booleanデフォルト
falseisDisabled
非推奨説明
If true, the form control will be disabled.
非推奨
Use disabled instead.
タイプ
booleanデフォルト
falseisInvalid
非推奨説明
If true, the form control will be invalid.
非推奨
Use invalid instead.
タイプ
booleanデフォルト
falseisReadOnly
非推奨説明
If true, the form control will be readonly.
非推奨
Use readOnly instead.
タイプ
booleanデフォルト
falseisRequired
非推奨説明
If true, the form control will be required.
非推奨
Use required instead.
タイプ
booleanデフォルト
falseisReversed
非推奨説明
If true, the value will be incremented or decremented in reverse.
非推奨
Use reversed instead.
タイプ
booleanmax
説明
The maximum allowed value of the slider. Cannot be less than min.
タイプ
numberデフォルト
100min
説明
The minimum allowed value of the slider. Cannot be greater than max.
タイプ
numberデフォルト
0name
説明
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]) => voidonChangeEnd
説明
Function called when the user is done selecting a new value.
タイプ
(value: [number, number]) => voidonChangeStart
説明
Function called when the user starts selecting a new value.
タイプ
(value: [number, number]) => voidorientation
説明
The orientation of the slider.
タイプ
"horizontal" | "vertical"デフォルト
'horizontal'readOnly
説明
If true, the form control will be readonly.
タイプ
booleanデフォルト
falserequired
説明
If true, the form control will be required.
タイプ
booleanデフォルト
falsereversed
説明
If true, the value will be incremented or decremented in reverse.
タイプ
booleansize
説明
The size of the RangeSlider.
タイプ
"sm" | "md" | "lg"デフォルト
"md"step
説明
The step in which increments or decrements have to be made.
タイプ
numberデフォルト
1thumbColor
説明
The CSS background property. Used in background of thumb element.
タイプ
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
説明
Props for range slider thumb element.
タイプ
RangeSliderThumbPropsthumbSize
説明
The CSS box-size property.
Used for calculating the width, height, and percentage of the container element.
タイプ
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
説明
The CSS color property. Used in color of track element.
タイプ
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
説明
Props for range slider track element.
タイプ
RangeSliderTrackPropstrackSize
説明
The CSS height property. Used in height of track element.
タイプ
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
説明
The value of the slider.
タイプ
[number, number]variant
説明
The variant of the RangeSlider.
タイプ
stringGitHubでこのページを編集する