angular-nouislider

I've forked this repository because in the original no one is maintaining the code and responding to the issues.

This is updated with the last version of noUiSlider.

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

Usage:

• Install: bower install angular-nouislider-updated
• 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>

• If you wanna change callback function, use callback attribute. (slide by 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!

Screenshot: