# @angular-slider/ngx-slider 中文文档

规范地址：https://npmcn.com/package/%40angular-slider/ngx-slider/

版本：22\.0\.0
npm 元数据更新时间：2026-06-17T03:05:17.454Z
中文译文更新时间：2026-11-06T04:17:14.545Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：413 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：@angular/core ^22\.0\.1，@angular/common ^22\.0\.1，@angular/forms ^22\.0\.1
- 首次发布：2020-10-31T08:26:43.571Z
- 最新版本发布：2026-06-17T03:05:17.301Z
- 近 30 天下载量：384662（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 2 个）

## 中文简介

Angular 以 angularjs- slip 为基础的自成一体、 移动友好滑动组件

## 安装

```sh
npm install @angular-slider/ngx-slider
```

也可以使用：`pnpm add @angular-slider/ngx-slider`、`yarn add @angular-slider/ngx-slider`、`bun add @angular-slider/ngx-slider`

## README

# ngx-滑动器

[![npm version](https://badge.fury.io/js/%40angular-slider%2Fngx-slider.svg)](https://badge.fury.io/js/%40angular-slider%2Fngx-slider)

网站: [https://angular-sliver.github.io/ngx-sliver/ (英语)](https://angular-slider.github.io/ngx-slider/)

解析器 : [https://discord.gg/DHsDghZRwZ 互联网档案馆的存檔,存档日期2013-12-21](https://discord.gg/DHsDghZRwZ)

Angular 的自成一体、便于移动的滑动组件 [角滑动器](https://github.com/angular-slider/angularjs-slider)。 。 。 .

## 依赖关系

| ngx-滑动器 | 角质 | RxJS 软件 | 积极支持 |
| --- | --- | --- | --- |
| 2.0.x (中文(简体) ) | 6.x - 12.x (英语) | 6.x (单位:千美元) | 没有 |
| 13.x (中文(简体) ) | 13.x (中文(简体) ) | 6.x (单位:千美元) | 没有 |
| 14.x (中文(简体) ) | 14.x (中文(简体) ) | 6.x (单位:千美元) | 没有 |
| 15.x (中文(简体) ) | 15.x (中文(简体) ) | 7.x 电话 | 没有 |
| 16.x (韩语) | 16.x (韩语) | 7.x 电话 | 没有 |
| 17.x (中文(简体) ) | 17.x (中文(简体) ) | 7.x 电话 | 没有 |
| 18.x 国家 | 18.x 国家 | 7.x 电话 | 没有 |
| 19.x (中文(简体) ) | 19.x (中文(简体) ) | 7.x 电话 | 对 |
| 20.x 电话 | 20.x 电话 | 7.x 电话 | 对 |
| 21.x (中文(简体) ) | 21.x (中文(简体) ) | 7.x 电话 | 对 |

_说明:_ 和Angular一样,只有最新的3个版本得到了积极的支持.

## 演示文稿

-   单滑- [堆叠布立茨](https://stackblitz.com/edit/ngx-slider-simple-slider-example?file=src%2Fapp%2Fapp.component.ts)
    
    ![simple slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/simple-slider.png)
    
-   范围滑动器 - [堆叠布立茨](https://stackblitz.com/edit/ngx-slider-range-slider-example?file=src%2Fapp%2Fapp.component.ts)
    
    ![range slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/range-slider.png)
    
-   带有勾选的滑动器 - [堆叠布立茨](https://stackblitz.com/edit/ngx-slider-ticks-example?file=src%2Fapp%2Fapp.component.ts)
    
    ![ticks slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/ticks-slider.png)
    
-   自定义幻灯片 - [堆叠布立茨](https://stackblitz.com/edit/ngx-slider-customised-range-slider-example?file=src%2Fapp%2Fapp.component.ts)
    
    ![customised slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/customised-slider.png)
    
-   带有自定义样式的滑动器 - [堆叠布立茨](https://stackblitz.com/edit/ngx-slider-styled-slider-example?file=src%2Fapp%2Fapp.component.ts)
    
    ![styled slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/styled-slider.png)
    
-   垂直滑动器 - [堆叠布立茨](https://stackblitz.com/edit/ngx-slider-vertical-slider-example?file=src%2Fapp%2Fapp.component.ts)
    
    ![vertical slider image](https://raw.githubusercontent.com/angular-slider/ngx-slider/master/assets/vertical-slider.png)
    
-   [官方网站更多实例](https://angular-slider.github.io/ngx-slider/demos)
    

## 安装

要将滑动器添加到您的角工程中 :

```
npm install --save @angular-slider/ngx-slider
```

安装后, 将滑动器添加到您的 `app.module.ts`数字 :

```typescript
import { NgxSliderModule } from '@angular-slider/ngx-slider';

...

@NgModule({
   ...
   imports: [
     ...
     NgxSliderModule,
    ...
   ],
   ...
})
export class AppModule {}
```

## 样本使用情况

您现在可以使用应用程序组件中的滑动组件, 例如 `app.component.ts`数字 :

```typescript
import { Options } from '@angular-slider/ngx-slider';
...

@Component({...})
export class AppComponent {
  value: number = 100;
  options: Options = {
    floor: 0,
    ceil: 200
  };
}
```

在模板文件中 `app.component.html`数字 :

```html
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
```

## 文档

API 文档全文可见于 [官方网站 (简体中文)](https://angular-slider.github.io/ngx-slider/docs)。 。 。 .

## 样式

如何将自己的风格应用到滑动器的概述如下: [击打.md](https://npmcn.com/package/%40angular-slider/ngx-slider/STYLING.md)。 。 。 .

## 动画

至v1.2.0,滑行器的功能是滑行器运动的CSS动画. 如果你更喜欢以前的行为,不用动画,可以设置旗帜 `animate: false` 在幻灯片选项中.

## 键盘快捷键

除了鼠标/触摸事件,滑动器也可以通过键盘来控制. 可用的快捷方式有:

-   右/上箭头 - 逐个增加,
-   左下箭头 -- -- 逐个减少,
-   页面上行 - 将滑动范围增加10%,
-   下行- 滑动范围减少10%,
-   家 - 移动到最小值,
-   结束 - 移动到最大值.

## 工具提示

滑动器允许自定义如何执行工具提示. 见 [托尔蒂斯·姆德](https://npmcn.com/package/%40angular-slider/ngx-slider/TOOLTIPS.md) 更多信息.

## 已知问题

在报告新错误之前,请看 [识相相相克. md](https://npmcn.com/package/%40angular-slider/ngx-slider/KNOWN_ISSUES.md) 一份已知问题清单 及其工作。 无法接受针对这些问题的新错误报告 .

## 错误

您可以将任何错误报告为 [Github 问题](https://github.com/angular-slider/ngx-slider/issues)。 。 。 .

请详细描述在任何相关代码上粘贴的问题,或者最好用StackBlitz来复制问题 [伪造并编辑此样本 StackBlitz](https://stackblitz.com/edit/ngx-slider-simple-slider-example?file=src/app/app.component.ts)还请提供您正在使用的国家预防机制软件包.

## 更改日志

关于修改和错误修正的列表,参见 [变动情况](https://npmcn.com/package/%40angular-slider/ngx-slider/CHANGELOG.md)。 。 。 .

## 开发者信息

如果你想为该项目捐款,请看 [最不发达国家](https://npmcn.com/package/%40angular-slider/ngx-slider/DEVELOPERS.md)。 。 。 .

## 许可证

该项目根据麻省理工学院的许可证获得许可证.

## 升级

关于图书馆以前版本(1.x)的升级说明,见 [更新(md)](https://npmcn.com/package/%40angular-slider/ngx-slider/UPGRADING.md)。 。 。 .

## 常见问题

### @angular-slider/ngx-slider 是什么？

Angular 以 angularjs- slip 为基础的自成一体、 移动友好滑动组件

### 如何安装 @angular-slider/ngx-slider？

在项目目录运行 npm install @angular-slider/ngx-slider，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^22\.0\.1）、@angular/common（^22\.0\.1）、@angular/forms（^22\.0\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @angular-slider/ngx-slider 支持 TypeScript 吗？

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

### @angular-slider/ngx-slider 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @angular-slider/ngx-slider 可以商用吗？

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

### @angular-slider/ngx-slider 的下载量有多少？

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

### @angular-slider/ngx-slider 还在维护吗？

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