Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
Any errors on page? – WooCaSh Jun 14 at 16:34
Stupid question but need ask. Did you include angular library too? – WooCaSh Jun 14 at 16:35
Yes, I did. That is why all other stuff still works. To make question readable, I just posted snipped of my index.html – Watt Jun 14 at 16:37
1  
this error is probably caused by your IDE which don't recognize custom html tags. There should be another issue. I will try help you even if I am beginner in Angular too :) – WooCaSh Jun 14 at 16:50
1  
Correct me if I'm wrong but it should work when you inject 'uiSlider' into your app to use the uiSlider module within your app. var app = angular.module('myApp', ['uiSlider']) – Pascal Bayer Jun 14 at 17:07
show 4 more comments

1 Answer

up vote 3 down vote accepted

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

Founded troubles:

  • it's required anfular version 1.1.4 and higher
  • you need have slider-template.html file

  • and like @Pascal said you need inlclude uiSlider:

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

DEMO

share|improve this answer
+1. Thanks for code. I will test to see what I missed. – Watt Jun 14 at 17:21
It shows up on screen now. It just doesn't slide when I set floor="0.0" ceiling="1.0". I am looking into it. It would be great help if you could comment on that. – Watt Jun 14 at 17:36
@Watt you want range from 0 to 1 right? – WooCaSh Jun 14 at 17:44
1  
I edited for you DEMO. Range from 0 to 1 with step 0.1. Please check and tell me if it's ok. – WooCaSh Jun 14 at 17:46
+1 Thank you Sir!! – Watt Jun 14 at 18:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.