Pagar.me directive to provide a custom range element
Check the demo here
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>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>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