# @appigram/react-rangeslider 中文文档

规范地址：https://npmcn.com/package/%40appigram/react-rangeslider/

版本：2\.2\.24
npm 元数据更新时间：2026-06-12T08:43:30.024Z
中文译文更新时间：2026-11-06T11:31:30.973Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40appigram/react-rangeslider
原文对照：https://npmcn.com/package/%40appigram/react-rangeslider/?lang=original
项目主页：https://github.com/appigram/react-rangeslider#readme
源码仓库：https://github.com/appigram/react-rangeslider

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

- 包体积（解压后）：117 kB，20 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=14
- 运行依赖：2 个
- peer 依赖：react \*
- 首次发布：2019-08-04T19:41:53.672Z
- 最新版本发布：2026-06-12T08:43:29.917Z
- 近 30 天下载量：6215（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 2 个）

## 中文简介

作为 HTML5 输入范围滑动多填充器的轻量级反应组件

## 安装

```sh
npm install @appigram/react-rangeslider
```

也可以使用：`pnpm add @appigram/react-rangeslider`、`yarn add @appigram/react-rangeslider`、`bun add @appigram/react-rangeslider`

## README

[![react-rangeslider](https://github.com/whoisandy/react-rangeslider/blob/master/docs/images/rangeslider_dark.png)](https://whoisandy.github.io/react-rangeslider/)

快速和轻量级反应组件,作为HTML5输入范围滑动元素的倒置.

 [![](https://img.shields.io/npm/v/react-rangeslider.svg?style=flat-square)](https://www.npmjs.org/package/react-rangeslider)[![](https://img.shields.io/github/license/whoisandy/react-rangeslider.svg) ](https://github.com/whoisandy/react-rangeslider/blob/master/LICENSE)[![](https://api.travis-ci.org/whoisandy/react-rangeslider.svg) ](https://travis-ci.org/whoisandy/react-rangeslider)[![](https://img.shields.io/badge/code%20style-standard-brightgreen.svg) ](http://standardjs.com/)[![](http://img.shields.io/npm/dm/react-rangeslider.svg?style=flat-square)](https://www.npmjs.org/package/react-rangeslider)

## 安装

使用 `npm` (使用时 `--save` 把它纳入你的包裹。 json)

```bash
$ npm install react-rangeslider --save
```

使用 `yarn` (此命令还会在您的软件包中添加反应范围滑动器。 json 依赖性)

```bash
$ yarn add react-rangeslider
```

## 开始

React-Range滑行器被捆绑有滑行器组件和默认样式,这些样式可以根据您的设计要求被覆盖 .

用一个模块捆绑器,如网络包,支持通用JS或ES2015模块,随你如何使用:

```js
// Using an ES6 transpiler like Babel
import Slider from 'react-rangeslider'

// To include the default styles
import 'react-rangeslider/lib/index.css'

// Not using an ES6 transpiler
var Slider = require('react-rangeslider')
```

UMD的建筑还可以在下列网址上查阅: [(单位:公斤)](https://unpkg.com/react-rangeslider/umd/ReactRangeslider.min.js)数字 :

```html
<script src="https://unpkg.com/react-rangeslider/umd/rangeslider.min.js"></script>
```

您可以在 `window.ReactRangeslider`。可以选择通过添加样式表在默认样式中降下.

```html
<link rel="stylesheet" href="https://unpkg.com/react-rangeslider/umd/rangeslider.min.css" />
```

检查出来 [文件实例( e)](https://whoisandy.github.io/react-rangeslider)。 。 。 .

## 基本示例

```jsx
import React, { Component } from 'react'
import Slider from 'react-rangeslider'

class VolumeSlider extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      volume: 0
    }
  }

  handleOnChange = (value) => {
    this.setState({
      volume: value
    })
  }

  render() {
    let { volume } = this.state
    return (
      <Slider
        value={volume}
        orientation="vertical"
        onChange={this.handleOnChange}
      />
    )
  }
}
```

## API 密码

范围滑动器被捆绑为一个单一的组件,它只接受数据和回调 `props`。 。 。 .

### 构成部分

```jsx
import Slider from 'react-rangeslider'

// inside render
<Slider
  min={Number}
  max={Number}
  step={Number}
  value={Number}
  orientation={String}
  reverse={Boolean}
  tooltip={Boolean}
  labels={Object}
  handleLabel={String}
  format={Function}
  onChangeStart={Function}
  onChange={Function}
  onChangeComplete={Function}
/>
```

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `min` | 编号 | 0 个 | 滑动器可持有的最小值 |
| `max` | 编号 | 100个 | 滑动器可持有的最大值 |
| `step` | 编号 | 1个 | 须加薪/降薪的分步骤 |
| `value` | 编号 |  | 滑动器的当前值 |
| `orientation` | 字符串 | 水平 | 滑动器的方向 |
| `tooltip` | 布尔 | 真实 | 显示或隐藏工具提示 |
| `reverse` | 布尔 | 虚假 | 垂直滑动器的倒向( 从下到下) |
| `labels` | 对象 | {} | 含有密钥值对的对象. `{ 0: 'Low', 50: 'Medium', 100: 'High'}` |
| `handleLabel` | 字符串 | '' | 在滑动手柄内显示的字符串标签 |
| `format` | 函数 |  | 在标签或工具提示中格式化和显示值的函数 |
| `onChangeStart` | 函数 |  | 当用户开始拖动滑动手柄时,函数会被调用 |
| `onChange` | 函数 |  | 当滑动手柄被拖动或点击时,函数会被调用 |
| `onChangeComplete` | 函数 |  | 当用户停止拖动滑动手柄时,函数会被调用. |

## 发展

要在当地工作,你需要拉它的依赖和运行 `npm start`。 。 。 .

```bash
$ npm install
$ npm start
```

## 问题

随意贡献. 提交拉动请求或提出一个问题供进一步讨论.

## 许可证

麻省理工学院

## 常见问题

### @appigram/react-rangeslider 是什么？

作为 HTML5 输入范围滑动多填充器的轻量级反应组件

### 如何安装 @appigram/react-rangeslider？

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

### @appigram/react-rangeslider 支持 TypeScript 吗？

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

### @appigram/react-rangeslider 支持 ESM 还是 CommonJS？

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

### @appigram/react-rangeslider 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=14。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @appigram/react-rangeslider 可以商用吗？

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

### @appigram/react-rangeslider 的下载量有多少？

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

### @appigram/react-rangeslider 还在维护吗？

最新版本 2\.2\.24 发布于 2026/06/12（4 个月前）；至今共发布 22 个版本，其中过去 12 个月发布了 2 个；首次发布于 2019/08/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。