# 滑动条

提供用户从一系列值中选择。

```jsx
<Slider defaultValue={[50]} />
```

## [API 参考](#api-参考)

该组件继承了 [Slider 原语](/primitives/docs/components/slider) 的属性，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| 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` 属性来控制尺寸。

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} size="1" />

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

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

### [变体](#变体)

使用 `variant` 属性来控制视觉风格。

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} variant="surface" />

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

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

### [颜色](#颜色)

使用 `color` 属性来分配特定的 [颜色](/themes/docs/theme/color)。

```jsx
<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` 属性在亮模式下增加颜色对比度。

```jsx
<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` 属性来分配特定的半径值。

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} radius="none" />

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

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

### [范围](#范围)

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

```jsx
<Slider defaultValue={[25, 75]} />
```

<!--$-->

<!--/$-->