# ng5-slider

> Self-contained, mobile friendly slider component for Angular 5+ based on angularjs-slider

Latest version **1.2.6** (published 2020-10-30) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ng5-slider
pnpm add ng5-slider
yarn add ng5-slider
bun add ng5-slider
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2020-10-30 |
| First published | 2018-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 412 |
| Author | Piotr Dziwinski |
| Maintainers | piotrdz |
| Keywords | slider, ui, component, angular, ng, angular2, ng2, angular4, ng4, angular5, ng5 |

## Links

- npm: https://www.npmjs.com/package/ng5-slider
- Repository: https://github.com/angular-slider/ng5-slider
- Homepage: https://github.com/angular-slider/ng5-slider#readme
- Issues: https://github.com/angular-slider/ng5-slider/issues
- npm.io page: https://npm.io/package/ng5-slider

## Dependencies (4)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.6
- [tslib](https://npm.io/package/tslib.md) ^1.7.1
- [rxjs-compat](https://npm.io/package/rxjs-compat.md) ^6.5.2
- [detect-passive-events](https://npm.io/package/detect-passive-events.md) ^1.0.4

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 1.2.6 (latest) — 2020-10-30
- 1.2.5 — 2020-10-30
- 1.2.4 — 2019-06-21
- 1.2.3 — 2019-06-18
- 1.2.2 — 2019-06-18
- 1.2.1 — 2019-06-11
- 1.2.0 — 2019-06-04
- 1.1.14 — 2019-04-07
- 1.1.13 — 2019-02-03
- 1.1.12 — 2019-01-14
- 1.1.11 — 2018-12-20
- 1.1.10 — 2018-12-18
- 1.1.9 — 2018-12-17
- 1.1.8 — 2018-12-06
- 1.1.7 — 2018-11-25
- … 13 more at https://npm.io/package/ng5-slider/versions

## README

# ng5-slider
[![npm version](https://badge.fury.io/js/ng5-slider.svg)](https://badge.fury.io/js/ng5-slider)
[![Travis CI Build](https://travis-ci.org/angular-slider/ng5-slider.svg?branch=master)](https://travis-ci.org/angular-slider/ng5-slider)

Website: https://angular-slider.github.io/ng5-slider/

Self-contained, mobile friendly slider component for Angular 5+ based on [angularjs-slider](https://github.com/angular-slider/angularjs-slider).

## Demos

 * Single slider - [StackBlitz](https://stackblitz.com/edit/ng5-slider-simple-slider-example?file=src%2Fapp%2Fapp.component.ts)

   ![simple slider image](https://raw.githubusercontent.com/angular-slider/ng5-slider/master/assets/simple-slider.png)

 * Range slider - [StackBlitz](https://stackblitz.com/edit/ng5-slider-range-slider-example?file=src%2Fapp%2Fapp.component.ts)

   ![range slider image](https://raw.githubusercontent.com/angular-slider/ng5-slider/master/assets/range-slider.png)

 * Slider with ticks - [StackBlitz](https://stackblitz.com/edit/ng5-slider-ticks-example?file=src%2Fapp%2Fapp.component.ts)

   ![ticks slider image](https://raw.githubusercontent.com/angular-slider/ng5-slider/master/assets/ticks-slider.png)

 * Customised slider - [StackBlitz](https://stackblitz.com/edit/ng5-slider-customised-range-slider-example?file=src%2Fapp%2Fapp.component.ts)

   ![customised slider image](https://raw.githubusercontent.com/angular-slider/ng5-slider/master/assets/customised-slider.png)

 * Slider with custom style - [StackBlitz](https://stackblitz.com/edit/ng5-slider-styled-slider-example?file=src%2Fapp%2Fapp.component.ts)

   ![styled slider image](https://raw.githubusercontent.com/angular-slider/ng5-slider/master/assets/styled-slider.png)

 * Vertical slider - [StackBlitz](https://stackblitz.com/edit/ng5-slider-vertical-slider-example?file=src%2Fapp%2Fapp.component.ts)

   ![vertical slider image](https://raw.githubusercontent.com/angular-slider/ng5-slider/master/assets/vertical-slider.png)

 * [More examples on official website](https://angular-slider.github.io/ng5-slider/demos)

## Dependencies

 * Angular 5+
 * rxjs 5+

## Installation

To add the slider to your Angular project:
```
npm install --save ng5-slider
```

Once installed, add the slider to your `app.module.ts`:
```typescript
import { Ng5SliderModule } from 'ng5-slider';

...

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

## Sample usage

Now you can use the slider component in your app components, for example in `app.component.ts`:
```typescript
import { Options } from 'ng5-slider';
...

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

And in template file `app.component.html`:
```html
<ng5-slider [(value)]="value" [options]="options"></ng5-slider>
```

## Documentation
Full API documentation is available on [official website](https://angular-slider.github.io/ng5-slider/docs).

## Styling

An overview of how to apply your own style to the slider is described in [STYLING.md](STYLING.md).

## Animations

As of v1.2.0 the slider features CSS animations of slider movement. If you prefer the previous behaviour, without animations, you can set the flag `animate: false` in your slider options.

## Keyboard Shortcuts

In addition to mouse/touch events, the slider can also be controlled through keyboard. The available shortcuts are:
 - right/up arrow - increase by single step,
 - left/down arrow - decreate by single step,
 - page up - increase by 10% of slider range,
 - page down - decrease by 10% of slider range,
 - home - move to minimum value,
 - end - move to maximum value.

## Tooltips

The slider allows for customising how to implement tooltips. See [TOOLTIPS.md](TOOLTIPS.md) for more information.

## Known Issues

Before reporting a new bug, please look at [KNOWN_ISSUES.md](KNOWN_ISSUES.md) for a list of known problems and their workarounds. New bugs reports for these problems will not be accepted.

## Bugs

You can report any bugs as [Github issues](https://github.com/angular-slider/ng5-slider/issues).

Please describe the issue in detail pasting any relevant code, or preferrably a StackBlitz with reproduction of the problem by [forking and editing this sample StackBlitz](https://stackblitz.com/edit/ng5-slider-simple-slider-example?file=src/app/app.component.ts). Please also provide the version of NPM package you are using.

## Changelog

For list of changes and bugfixes, see [CHANGELOG.md](CHANGELOG.md).

## Developer information

If you would like to contribute to the project, see [DEVELOPERS.md](DEVELOPERS.md).

## License

The project is licensed under the MIT license.

---
_Source: https://npm.io/package/ng5-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._