# angular-ranger

> A mobile friendly, super-fast, range slider. He's the hero Your App deserves...

Latest version **0.2.1** (published 2017-01-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-ranger
pnpm add angular-ranger
yarn add angular-ranger
bun add angular-ranger
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2017-01-28 |
| First published | 2016-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Justin Maier |
| Maintainers | justmaier |
| Keywords | angular |

## Links

- npm: https://www.npmjs.com/package/angular-ranger
- Repository: https://github.com/justmaier/angular-ranger
- Issues: https://github.com/justmaier/angular-ranger/issues
- npm.io page: https://npm.io/package/angular-ranger

## Recent versions

- 0.2.1 (latest) — 2017-01-28
- 0.1.4 — 2016-03-03

## README

angular-ranger
=====================

A mobile friendly, *super-fast*, range slider. No jQuery necessary...

[**Check out a demo**](http://justmaier.github.io/angular-ranger/#demo)

##Installation

####Bower
`bower install angular-ranger`

####Nuget
`install-package AngularJs.Ranger`

####Manually
```html
<link rel="stylesheet" href="js/angular-ranger.css">
<script type="text/javascript" src="js/angular-ranger.js"></script>
```

##Usage

0. Install `angular-ranger` using one of the methods above.
1. Add `angular-ranger` as a module dependency to your app
2. Drop a ranger into your html

####Javascript
```javascript
angular.module('app', ['angular-ranger'])
.run(function($rootScope){
	$rootScope.value = {
		min: 5,
		max: 18,
		value: 12
	};
});
```

####Html
```html
<!-- Range selection -->
<angular-ranger min="0" max="20" step="1" min-value="value.min" max-value="value.max"></angular-ranger>

<!-- Single value selection -->
<angular-ranger min="0" max="20" step="1" value="value.value"></angular-ranger>
```

##Notes

- Angular-Ranger uses Sass to make the design highly customizable. Check the sass file for all of the available options.
- Angular-Ranger includes a simple gulpfile so that you can make your own adjustments and build/re-minify using `gulp build`. Keep in mind you will need to install the dev dependencies first using `npm install`.
- This has been tested on Windows, Windows Phone, and iOS. Let me know if you run into any bugs.
- Pull requests are always welcome

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