pagarme-ng-range

Pagar.me directive to provide a custom range element

Check the demo here

Installation

Install via npm package manager:

$ npm install pg-ng-range

Import the directive file into your project:

<script src="node_modules/pg-ng-range/dest/pg-ng-range.min.js"></script>

If you wish the same style of the example, import the css.

<link rel="stylesheet" type="text/css" href="dest/css/pg-ng-range.min.css">

Load the pg-ng-range module:

angular.module('myApp', ['pg-ng-range']);

Call the directive in an element via attribute, class or tag name:

<div pg-ng-range></div>
<div class="pg-ng-range"></div>
<pg-ng-range></pg-ng-range>

Directive Optionals

Like the regular html5 range input, you can set min, max and value attributes. The dafault values when no attribute is set is 0 for min, 100 for max and 50% of the max for amount.

<div pg-ng-range min="100" max="500" value="230"></div>

All attributes can be set with custom variables.

<div pg-ng-range min="myCustomMinimum" max="myCustomMaximun" value="myCustomValue"></div>

Retrieving the resulting value

It is necessary to pass a variable on the value attribute, so the user interaction will update it.

<div pg-ng-range min="100" max="500" value="myCustomValue"></div>

And that's it :D

Rafael Violato @ pagar.me

Support

If you have any problem or suggestion please open an issue here.

License

Check here.