提供用户从一系列值中进行选择的功能。
<Slider defaultValue={[50]} />
此组件继承自 Slider 原始组件 的 props，并支持通用的 margin props。
| 属性 | 类型 | 默认值 |
|---|---|---|
size | 响应式<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
使用 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 属性来控制视觉样式。
<Flex direction="column" gap="4" maxWidth="300px">
<Slider defaultValue={[25]} variant="surface" />
<Slider defaultValue={[50]} variant="classic" />
<Slider defaultValue={[75]} variant="soft" />
</Flex>
使用 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>
使用 highContrast 属性来增加浅色模式下的颜色对比度。
<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 属性来指定特定的圆角值。
<Flex direction="column" gap="4" maxWidth="300px">
<Slider defaultValue={[25]} radius="none" />
<Slider defaultValue={[50]} radius="small" />
<Slider defaultValue={[75]} radius="full" />
</Flex>
提供多个值以创建一个范围滑块。
<Slider defaultValue={[25, 75]} />