angular-nouislider
Simple angular directive for jquery nouislider plugin. Demo is here.
Usage:
- Install:
bower install angular-nouislider - Add
jquery,angular,nouisliderandangular-nouisliderto your code:
<link rel="stylesheet" href="bower_components/nouislider/jquery.nouislider.css" /> <script src="bower_components/jquery/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/nouislider/jquery.nouislider.js"></script> <script src="bower_components/nouislider/Link.js"></script> <script src="bower_components/angular-nouislider/src/nouislider.js"></script>- Add a dependency to the
nouislidermodule in your application.
angular.module('MyApp', ['nouislider']);- Add a
sliderattribute to your<div>tag:
<div slider ng-model="test.single" start=1 end=10></div> <div slider ng-from="test.from" ng-to="test.to" start=0 end=100 step=5></div>- If you wanna change callback function, use
callbackattribute. (slideby default.)
<div slider ng-model="test.single" start=1 end=10 callback='change'></div> <div slider ng-from="test.from" ng-to="test.to" start=0 end=100 step=5 callback='set'></div>That's it!
