# @appbaseio/rheostat 中文文档

规范地址：https://npmcn.com/package/%40appbaseio/rheostat/

版本：1\.0\.0-alpha\.15
npm 元数据更新时间：2023-04-19T07:30:41.532Z
中文译文更新时间：2026-11-06T11:18:33.094Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40appbaseio/rheostat
原文对照：https://npmcn.com/package/%40appbaseio/rheostat/?lang=original
源码仓库：https://github.com/airbnb/rheostat

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

- 包体积（解压后）：95.6 kB，47 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：react \>=0\.13\.x
- 首次发布：2022-10-10T14:02:04.834Z
- 最新版本发布：2023-01-23T19:07:21.078Z
- 近 30 天下载量：12160（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 0 个）

## 中文简介

Rheostat 是一个使用 React 构建的 www, mobile 和可访问的滑动器组件

## 安装

```sh
npm install @appbaseio/rheostat
```

也可以使用：`pnpm add @appbaseio/rheostat`、`yarn add @appbaseio/rheostat`、`bun add @appbaseio/rheostat`

## README

# 风速

> 一个移动的,平板的,桌面的,以及网络的可访问的滑动器.

![Rheostat demo](https://npmcn.com/package/%40appbaseio/rheostat/sample.gif)

## 安装

`npm install rheostat`

## 道具

默认算法 [`linear`](https://npmcn.com/package/%40appbaseio/rheostat/src/algorithms/linear.js),滑块将使用。 随便写 只要它符合形状,你自己的.

```js
  algorithm: PropTypes.shape({
    getValue: PropTypes.func,
    getPosition: PropTypes.func,
  })
```

自定义类名称将应用到 Rheostat 根上 .

```js
  className: PropTypes.string
```

自定义反应组件覆盖控件和"进步"栏.

```js
  handle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
  progressBar: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
```

最大和最小可能值,默认为0-100.

```js
  max: PropTypes.number
  min: PropTypes.number
```

`pitComponent` 是一个自定义的 React 组件,用于跨栏渲染“ pits ”. `pitPoints` 那是它使坑形的一组点。 点是数组 联 合 国 `values` 在滑轮上.

```js
  pitComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
  pitPoints: PropTypes.arrayOf(PropTypes.number)
```

注: `onChange` 当值被改变和承诺时,就称为值。 这发生在最后 拖曳、按键或单击事件. `onChange` 当您想要坚持这些价值观时,建议您这样做.

`onValuesUpdated` 是一个正在激活值时触发的方便事件 已更改。 这包括拖放、点击或按键. `onValuesUpdated` 如果需要,则建议 在他们承诺之前 与价值观合作.

```js
  onChange: PropTypes.func
  onClick: PropTypes.func
  onKeyPress: PropTypes.func
  onSliderDragEnd: PropTypes.func
  onSliderDragMove: PropTypes.func
  onSliderDragStart: PropTypes.func
  onValuesUpdated: PropTypes.func
```

`snap` 是布林能控制滑动器的快取行为. `snapPoints` 是一组 `values` 在滑块上,滑块应该按住.

若为 `snap` 设定为真实和否 `snapPoints` 设置,然后滑动器被切成绝对 立场。 例如,在1-10的尺度上,如果滑动器在54%的标记被松开,它会选择 值 5 , 坐标为 50%.

```js
  snap: PropTypes.bool
  snapPoints: PropTypes.arrayOf(PropTypes.number)
```

默认值为0和100.

```js
  values: PropTypes.arrayOf(PropTypes.number)
```

可以禁用滑动器来阻止用户移动.

```js
  disabled: PropTypes.bool
```

## 使用量

> 重要:确保纳入 [css 文件 :](https://npmcn.com/package/%40appbaseio/rheostat/css/slider.css) 或自由创造自己的.

-   很简单.

```js
import Rheostat from 'rheostat';

ReactDOM.render(<Rheostat />, document.getElementById('slider-root'));
```

-   有多个手柄的滑动器.

```js
import Rheostat from 'rheostat';

ReactDOM.render((
  <Rheostat
    min={1}
    max={100}
    values={[1, 100]}
  />
), document.getElementById('slider-root'));
```

## 现场播放

更多的例子,你可以查看故事书.

-   把这台重机打掉.
-   `npm install`
-   `npm run storybook`
-   访问 `http://localhost:9001/`。 。 。 .

## 常见问题

### @appbaseio/rheostat 是什么？

Rheostat 是一个使用 React 构建的 www, mobile 和可访问的滑动器组件

### 如何安装 @appbaseio/rheostat？

在项目目录运行 npm install @appbaseio/rheostat，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=0\.13\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @appbaseio/rheostat 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/appbaseio\_\_rheostat 是否存在。

### @appbaseio/rheostat 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @appbaseio/rheostat 可以商用吗？

@appbaseio/rheostat 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @appbaseio/rheostat 的下载量有多少？

根据 npm 官方下载统计，@appbaseio/rheostat 在 2026/10/07 – 2026/11/05 这 30 天内被下载 12,160 次，日均约 405 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @appbaseio/rheostat 还在维护吗？

最新版本 1\.0\.0-alpha\.15 发布于 2023/01/24（3 年前）；至今共发布 16 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/10/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。