Angular-slider-easy NPM

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.

npm.io

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 after angular.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 -->

Define `option` and `value` in `ngController`

$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

option[expression]

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

value[expression]

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