# 滑块

> React 的 RGB、RGBA、HSL 和 HSV 颜色选择器，提供精确的数值输入框和透明度控件，并使用原生 range 输入框支持键盘操作。

Source: https://chroma-panel.jscrate.dev/zh/react/modes/sliders
Last updated: 2026-09-21

滑块模式用于编辑 RGB、HSL 和 HSB（HSV）通道。每个通道都有一个滑块，外加一个用来输入精确值的数值框。用顶部的切换控件可以切换颜色模型。如果你的应用不接受透明色，请设置 `showAlpha={false}`。

## 结构

```tsx
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/sliders";

<ChromaPanel modes={["sliders"]} />;
```

每一行都是一个 [ChannelSlider](https://chroma-panel.jscrate.dev/zh/react/components/channel-slider)，底层是真正的 `<input type="range">`，所以键盘和屏幕阅读器的行为都由浏览器提供。

## 演示

```tsx
"use client";

import { ChromaPanel } from "chroma-panel";

export default function ChromaPanelSlidersDemo() {
  return (
    <ChromaPanel
      defaultValue="#3366cc"
      modes={["sliders"]}
      showTitleBar={false}
      injectStyles={false}
    />
  );
}
```

## 模式 id

`'sliders'`。把它加入 `modes` 就会显示这个标签页，标签页的顺序与它们在 `modes` 中的顺序一致。