Simple angular directive for jquery nouislider plugin
Clone or download
Vasyl Stanislavchuk
Vasyl Stanislavchuk Updated readme.
Latest commit 5072efb May 16, 2014
Permalink
Failed to load latest commit information.
app Updated regarding new nouislider version. May 16, 2014
src 0.3.1 May 16, 2014
.bowerrc Initial version. Feb 8, 2014
.editorconfig Initial version. Feb 8, 2014
.gitattributes Initial version. Feb 8, 2014
.gitignore Initial version. Feb 8, 2014
.jshintrc Initial version. Feb 8, 2014
Gruntfile.js Added minified version. Feb 15, 2014
LICENSE Initial commit Feb 8, 2014
README.md Updated readme. May 16, 2014
bower.json 0.3.1 May 16, 2014
example.jpg Updated readme. Feb 9, 2014
package.json Initial version. Feb 8, 2014

README.md

angular-nouislider

Simple angular directive for jquery nouislider plugin. Demo is here.

Usage:

  • Install: bower install angular-nouislider
  • Add jquery, angular, nouislider and angular-nouislider to 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 nouislider module in your application.
angular.module('MyApp', ['nouislider']);
  • Add a slider attribute 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>
<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!

Screenshot:

example