angular-slider-easy

An angular slider directive aim to ease the way to build up friendly app

Usage no npm install needed!

<script type="module">
  import angularSliderEasy from 'https://cdn.skypack.dev/angular-slider-easy';
</script>

README

angular-slider-easy

NPM version

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

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