How to implement jQuery range slider in AngularJS

javascript angularjs slider angularjs-directive

19,696

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

19,696

Author by

Watt

Updated on July 20, 2022

Comments

Watt almost 2 years
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.
- WooCaSh about 11 years
  
  Stupid question but need ask. Did you include angular library too?
- Watt about 11 years
  
  Yes, I did. That is why all other stuff still works. To make question readable, I just posted snipped of my index.html
- Watt about 11 years
  
  @WooCaSh no error. But, when I use element inspector in chrome to look for <slider..>..</slider> I can see it is there but not rendering. So, I went to see 'angular-slider.css' I notice that all the 'slider' term in the css file are red with error msg selector matches unknown element slider
- WooCaSh about 11 years
  
  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 :)
- Pascal Bayer about 11 years
  
  Would it be possible to provide some sample code on jsfiddle?
- Pascal Bayer about 11 years
  
  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'])
- Watt about 11 years
  
  @PascalBayer, +1 you are right. But, it still doesn't work after I put var app = angular.module('myApp', ['uiSlider'])
- Adelin almost 11 years
  
  To be more precise this directive does not depend on JQuery ( or at least this is what the author claims )
Watt about 11 years

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.
WooCaSh about 11 years

I edited for you DEMO. Range from 0 to 1 with step 0.1. Please check and tell me if it's ok.
Per Quested Aronsson over 10 years

You don't need the slider-template.html file anymore. It is in-lined in the Directive in the current version (0.1.5).