Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement jQuery range slider in AngularJS

I am trying to use anuglar-slider in my existing AngularJS app.

I followed the author's comments here

I downloaded below files (in Head tag) from author's github and added in my index.html

HTML code:

<head>  

<link rel="stylesheet" href="css/angular-slider.css">
<script src="js/vendor/angular-slider.js"></script>

</head>
<body>

  <slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider>

</body>   

App.js (Angular code) . I added second line as per Author's instructions, I suspect I did do something wrong there

var app = angular.module('myApp', [])
angular.module('uiSlider', []);

app.constant('Config',
{
    baseURL : "http://blah",
    httpTimeout : 36000
});
app.config(function($logProvider) {
    $logProvider.debugEnabled(true);
});
 //and some other app specific code follows

I don't see any slider rendering in browser. However, the older Angular specific functionality in the app still works and there is no error in browser's console.

If you cannot find problem above, feel free to suggest any other way to implement range slider in AngularJS app.

I am fairly new to AngularJS

Let me know if you like me to post Author's library file code here as well.

like image 667
Watt Avatar asked Jun 14 '13 16:06

Watt


1 Answers

Ok I found some troubles when preparing this but now it's working:

Founded troubles:

  • it's required angularjs version 1.1.4 or higher
  • you need have slider-template.html file
  • and like @Pascal said you need to include uiSlider:

    var app = angular.module('myApp', ['uiSlider'])
    
  • I prepared for you a working demo below. I hope it will help you

DEMO

like image 74
WooCaSh Avatar answered Oct 01 '22 18:10

WooCaSh