提供用户在一个值的范围内进行选择。
<Slider defaultValue={[50]} />
| 属性 | 类型 | 默认值 |
|---|---|---|
size | Responsive<"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]} />