README
angular-slider-easy
An angular slider directive aim to ease the way to build up friendly app
This is an angular
directive, by which, you would set up an slider-bar easily in few lines of code.
Try it: plunker
Requirement
- angularjs (1.2.0+)
Installation
Install via bower
bower install --save angular-slider-easy
Install via npm
npm install --save angular-slider-easy
Import
ES2015
import {sliderEasy} from 'angular-slider-easy';
CommonJS
var sliderEasy = require('angular-slider-easy').sliderEasy;
Script
<link rel="stylesheet" type="text/css" href="node_modules/angular-slider-easy/dist/angular-slider-easy.css" />
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-slider-easy/dist/angular-slider-easy.min.js"></script>
<script type="text/javascript">
var sliderEasy = window.sliderEasy;
</script>
Be sure load
angular-slider-easy.js
afterangular.js
is loaded.
Usage
var demo = angular.module('demo', [sliderEasy]);
Use slider-easy directive in the template
<slider-easy value="val" option="opts"></slider-easy>
<span>{{ val }}</span> <!-- display the val while moving the slider handle -->
option
and value
in ngController
Define
$scope.val = {};
$scope.opts = {
start: 3, //start point of the slider bar
end: 218, //end point of the slider bar
handles: [19, 60], //init point of two handles
outFormatter: function(value, decimals) {
if (value.point) {
return 'Current value is:' + value.point;
} else {
return 'Selected range is:' + (value.end - value.start).toFixed(decimals);
}
}//formatter of hint message
};
This is very important, you won't get the selected point/range if you miss the variable
value
API
expression]
option[Attribute | Type | Required | Description |
---|---|---|---|
start | number | Yes | start point of the slider bar |
end | number | Yes | end point of the slider bar |
decimals | int | No | the number of decimals will be kept in value , 0 by default |
handles | array | No | the init points of handles. If you want a range set in value , this is mandantory. If handles is missed, only one handle with init point as start will be generated |
outFormatter | function(value, decimals) | No | the formatter will be used format the hint message. usefull while you want to customize the hint message |
expression]
value[An empty plain object should be set in the
$scope
, and it will be filled with the selected value
Attribute | Type | Description |
---|---|---|
point | number | will be filled while no handles set or handles has only one value in it. Which means, it is an point selector |
start | number | will be filled while handles is set with two values. Which means, it is an range selector |
end | number | will be filled while handles is set with two values. Which means, it is an range selector |