# @fseehawer/react-circular-slider 中文文档

规范地址：https://npmcn.com/package/%40fseehawer/react-circular-slider/

版本：3\.3\.7
npm 元数据更新时间：2026-09-08T10:32:33.389Z
中文译文更新时间：2026-11-15T15:37:50.476Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fseehawer/react-circular-slider
原文对照：https://npmcn.com/package/%40fseehawer/react-circular-slider/?lang=original

弃用说明：Moved to @fiojs/react-circular-slider\. Update your dependency and imports\. Migration guide: https://www\.npmjs\.com/package/@fiojs/react-circular-slider

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：336 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2019-09-24T18:55:30.433Z
- 最新版本发布：2026-09-07T06:30:00.122Z
- 近 30 天下载量：42571（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：145（近 12 个月 7 个）

## 中文简介

无依赖性的自定义圆形滑动器 .

## 安装

```sh
npm install @fseehawer/react-circular-slider
```

也可以使用：`pnpm add @fseehawer/react-circular-slider`、`yarn add @fseehawer/react-circular-slider`、`bun add @fseehawer/react-circular-slider`

## README

# 反应-圆滑动器

[![Version](https://img.shields.io/badge/version-3.3.7-green.svg)](https://github.com/fseehawer/react-circular-slider) [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

一个高度自定义的圆形滑块 **零依赖关系**检查 [现场演示](https://fseehawer.github.io/react-circular-slider/)来啊!

![An image showing the CircularSlider settings](https://fseehawer.github.io/react-circular-slider/circular-slider.png)

## 类型脚本支持

本构成部分包括: **类型脚本** 用于组件道具、指针、指针位置和梯度停止.

_JavaScript用户:无忧 - 已公布的输出为平版JavaScript,和以前一样工作._

## 安装

```bash
npm install @fseehawer/react-circular-slider
```

## 示例

```tsx
import React from 'react';
import CircularSlider from '@fseehawer/react-circular-slider';

const App = () => (
    <CircularSlider onChange={(value) => console.log(value)} />
);

export default App;
```

## 配置示例

见 [现场演示](https://fseehawer.github.io/react-circular-slider/) 包括标签、颜色、自定义数据、指针内容、多站梯度和弧度表.

## 配置说明

-   使用 `data` 用于自定义标签或非线性步骤; 使用 `min` 财务报告和审定财务报表 `max` 用于包含数字范围.
-   使用 `dataIndex` 选择选中的项目 `data`,以及 `value` 仅在按度控制滑动器时.
-   使用 `ariaLabel` 当可见时 `label` 缩写、隐藏或不足以描述辅助技术.
-   使用 `arcStart` 财务报告和审定财务报表 `arcEnd` 用于平面滑动器。 添加 `trackDraggable` 当用户能够点击或拖动音轨时.
-   在弧模式下,梯度停止运行 `arcStart` 改为 `arcEnd`,使测量颜色按数值顺序排列.

## 道具

下表列出了所有可用的道具及其TypeScript类型,默认值和描述.

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `width` | `number` | `280` | 以像素表示的滑轮宽度 . |
| `direction` | `1 | -1` | `1` | 旋转方向 : `1` 为顺时针, `-1` 逆时针. |
| `min` | `number` | `0` | 最低价值. |
| `max` | `number` | `360` | 最大值 . |
| `initialValue` | `number` | `0` | 标签的初始值 . |
| `value` | `number` | `undefined` | 以度计的控制值 . |
| `data` | `(string | number)[]` | `[]` | 数组或标签,均匀分布在滑块上. |
| `dataIndex` | `number` | `0` | 数据阵列中的初始或可控索引位置. |
| `knobColor` | `string` | `"#4e63ea"` | No所取之色. |
| `knobSize` | `number` | `36` | 以像素表示的旋钮的相径. |
| `hideKnob` | `boolean` | `false` | 若为 `true`把手藏起来了. |
| `hideKnobRing` | `boolean` | `false` | 若为 `true`,半透明环绕着拐子被隐藏. |
| `knobDraggable` | `boolean` | `true` | 若为 `true`把手可以拖动. |
| `knobPosition` | `string | number` | `"top"` | 开始位置: 接受 `"top"`, (中文(简体) ), `"right"`, (中文(简体) ), `"bottom"`, (中文(简体) ), `"left"` 或角度(以度计). |
| `label` | `string` | `"ANGLE"` | 幻灯片上显示的文本标签. |
| `ariaLabel` | `string` | `undefined` | 滑动控件的可访问标签 。 倒计时 `label`。 。 。 . |
| `labelColor` | `string` | `"#272b77"` | 标签和值文本的颜色 . |
| `labelBottom` | `boolean` | `false` | 若为 `true`,标签位于滑动器下方. |
| `labelFontSize` | `string` | `"1rem"` | 标签的字体大小 . |
| `valueFontSize` | `string` | `"3rem"` | 显示值的字体大小 . |
| `appendToValue` | `string` | `""` | 附于值后的案文. |
| `prependToValue` | `string` | `""` | 文本准备到值 . |
| `renderLabelValue` | `React.ReactNode` | `null` | 自定义 JSX 渲染标签和值 . |
| `verticalOffset` | `string` | `"1.5rem"` | 标签/值显示的垂直偏移 . |
| `hideLabelValue` | `boolean` | `false` | 若为 `true`,标签和值都被隐藏. |
| `progressColorFrom` | `string` | `"#80C3F3"` | 启动进度梯度的颜色 . |
| `progressColorTo` | `string` | `"#4990E2"` | 进度梯度的结束颜色. |
| `progressSize` | `number` | `8` | 进展轨道的厚度. |
| `progressLineCap` | `"round" | "butt"` | `"round"` | 进度音轨的 Cap 样式 . |
| `useMouseAdditionalToTouch` | `boolean` | `false` | 若为 `true`,也可以在可触摸设备上监听鼠标输入. |
| `trackColor` | `string` | `"#DDDEFB"` | 背景音轨的颜色 . |
| `trackSize` | `number` | `8` | 背景音轨的厚度. |
| `trackDraggable` | `boolean` | `false` | 若为 `true`,单击或拖曳背景音轨更新值. |
| `progressGradient` | `(string | GradientStop)[]` | `undefined` | 多站进度梯度的颜色组合停止 。 覆盖 `progressColorFrom`编号 :`To`。每个站点可以是颜色字符串或 `{ offset, stopColor, stopOpacity }`。 。 。 . |
| `trackGradient` | `(string | GradientStop)[]` | `undefined` | 多站跑道梯度的颜色组合停止 。 覆盖 `trackColor`。 。 。 . |
| `arcStart` | `number` | `undefined` | 弧形模式的起始角度(以度为单位). 使用方式 `arcEnd` 以创建部分圆圈测量仪(例如:. `225` 以左为下. |
| `arcEnd` | `number` | `undefined` | 弧形模式的端角(以度计). 使用方式 `arcStart` (例如:. `135` 右下角=270°速度计扫描). |
| `children` | `React.ReactNode` | `undefined` | 自定义旋钮内容 . |
| `limitDragRange` | `boolean` | `false` | 若为 `true`,夹住将移动拖入已配置的数据区域. |
| `onChange` | `(value: string | number) => void` | `() => {}` | 当值变化时调用回调 . |
| `isDragging` | `(dragging: boolean) => void` | `() => {}` | 回拨以显示滑动器是否被拖动 . |

## 许可证

[MIT 许可证](https://opensource.org/licenses/MIT)

## 常见问题

### @fseehawer/react-circular-slider 是什么？

无依赖性的自定义圆形滑动器 \.注意：该包已被作者标记为弃用——Moved to @fiojs/react-circular-slider\. Update your dependency and imports\. Migration guide: https://www\.npmjs\.com/package/@fiojs/react-circular-slider

### 如何安装 @fseehawer/react-circular-slider？

在项目目录运行 npm install @fseehawer/react-circular-slider，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fseehawer/react-circular-slider 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fseehawer/react-circular-slider 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fseehawer/react-circular-slider 可以商用吗？

@fseehawer/react-circular-slider 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @fseehawer/react-circular-slider 的下载量有多少？

根据 npm 官方下载统计，@fseehawer/react-circular-slider 在 2026/10/16 – 2026/11/14 这 30 天内被下载 42,571 次，日均约 1,419 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fseehawer/react-circular-slider 还在维护吗？

最新版本 3\.3\.7 发布于 2026/09/07（2 个月前）；至今共发布 145 个版本，其中过去 12 个月发布了 7 个；首次发布于 2019/09/25。作者已将其标记为弃用，新项目建议寻找替代方案。