Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

滑块

允许用户从一系列值中进行选择。

View sourceReport an issueView in Playground
<Slider defaultValue={[50]} />

API 参考

¥API Reference

此组件继承了 滑块基础组件 的属性并支持 常用边距属性。

¥This component inherits props from the Slider primitive and supports common margin props.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
No default value
highContrast
boolean
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value

示例

¥Examples

尺寸

¥Size

使用 size 属性控制大小。

¥Use the size prop to control the size.

<Flex direction="column" gap="4" maxWidth="300px">

	<Slider defaultValue={[25]} size="1" />

	<Slider defaultValue={[50]} size="2" />

	<Slider defaultValue={[75]} size="3" />

</Flex>

变体

¥Variant

使用 variant 属性控制视觉样式。

¥Use the variant prop to control the visual style.

<Flex direction="column" gap="4" maxWidth="300px">

	<Slider defaultValue={[25]} variant="surface" />

	<Slider defaultValue={[50]} variant="classic" />

	<Slider defaultValue={[75]} variant="soft" />

</Flex>

颜色

¥Color

使用 color 属性指定特定的 color。

¥Use the color prop to assign a specific color.

<Flex direction="column" gap="4" maxWidth="300px">

	<Slider defaultValue={[20]} color="indigo" />

	<Slider defaultValue={[40]} color="cyan" />

	<Slider defaultValue={[60]} color="orange" />

	<Slider defaultValue={[80]} color="crimson" />

</Flex>

高对比度

¥High-contrast

使用 highContrast 属性增加亮色模式下的色彩对比度。

¥Use the highContrast prop to increase color contrast in light mode.

<Grid columns="2" gap="4">

	<Slider defaultValue={[10]} color="indigo" />

	<Slider defaultValue={[10]} color="indigo" highContrast />

	<Slider defaultValue={[30]} color="cyan" />

	<Slider defaultValue={[30]} color="cyan" highContrast />

	<Slider defaultValue={[50]} color="orange" />

	<Slider defaultValue={[50]} color="orange" highContrast />

	<Slider defaultValue={[70]} color="crimson" />

	<Slider defaultValue={[70]} color="crimson" highContrast />

	<Slider defaultValue={[90]} color="gray" />

	<Slider defaultValue={[90]} color="gray" highContrast />

</Grid>

圆角

¥Radius

使用 radius 属性指定特定的圆角值。

¥Use the radius prop to assign a specific radius value.

<Flex direction="column" gap="4" maxWidth="300px">

	<Slider defaultValue={[25]} radius="none" />

	<Slider defaultValue={[50]} radius="small" />

	<Slider defaultValue={[75]} radius="full" />

</Flex>

范围

¥Range

提供多个值以创建范围滑块。

¥Provide multiple values to create a range slider.

<Slider defaultValue={[25, 75]} />
Previous骨架
Next旋转器