提供用户从一系列值中选择。
<Slider defaultValue={[50]} />
该组件继承了 Slider 原语 的属性，并支持 常见的边距属性。
| Prop | Type | Default |
|---|---|---|
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 |
使用 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]} />