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 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 |

LICENSE

MIT License