Angularjs: directive not working with Jslider plugin - angularjs

Question

Right now I'm working on a project in which I need to use JSlider plugin of jquery with Angularjs. I tried to use this plugin into a directive and within directive I put this in $evalAsync so that I assign the values dynamically to Jslider after content loaded and before page rendering. The way I did this is mentioned below:-
var sliderDirective = angular.module("sliderModule",[]);
sliderDirective.directive("slider",function(){
return {
restrict: 'AE',
replace: true,
template: '<input id="slider" name="price" type="slider" value="{{filters.price}}">',
link: function(scope, elem, attrs) {
scope.$evalAsync(function(scope){
elem.slider({
from: 0,
to: 3000,
step: 50,
smooth: true,
round: 0,
limits: false,
scale: ['$0','|','$500','|','$1,000','|','$1,500','|','$2,000','|','$2,500','|','$3,000+'],
skin: "blue",
onstatechange:function(value){
scope.filters.price = value;
}
})
})
}
}
})
I'm setting the values dynamically that are being passing in link function's scope variable. But the problem is this that the slider doesn't get these dynamic values and shows only single pointer with value zero. So, anybody who has some solution for this problem. Also, there is a possibility that I followed a wrong way of doing this so please make me correct in that case.

Answer 1

I recommend you set the scope attribute of the directive to something like:
scope : {
values: '='
}
This means you have to provide the values through databinding to the directive. You can then watch the values in the linking function of the directive. As soon as they are not null, call the elem.slider function. I recommend to not use the evalAsync but use a watcher like this instead

Answer 2

Recently I have used RANGE SLIDER in angularJS.
<form>
<div class="choose_industry">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-4 col-md-2 col-lg-2 " for="name">What Industry?</label>
<div class="col-xs-12 col-sm-8 col-md-10 col-lg-10">
<div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="radio" name="radio1" id="radio1" value="cdl" ng-model="leg_ser.industry">
<label for="radio1">
Commercial Trucking Transportation
</label>
</div>
<div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="radio" name="radio1" id="radio2" value="non_cdl" ng-model="leg_ser.industry">
<label for="radio2">
Other Industries
</label>
</div>
</div>
</div>
</div>
<div class="employee_counting">
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Number of Employees?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="number" class="form-control" placeholder="Employees" name="Number of Employees" ng-model="leg_ser.num_of_emp">
<!-- <span>Total Number of Employees</span> -->
</div>
<div class="range_slider">
<span class="pull-left">0</span>
<span class="pull-right">25k</span>
<div id="slidecontainer">
<input type="range" min="0" max="25000" value="0" class="slider" id="myRange" ng-model="leg_ser.num_of_emp">
</div>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Enrollment Percentage (%)?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-percent"></i></span>
<input type="number" class="form-control" placeholder="Percentage" name="Enrollment Percentage" ng-model="leg_ser.enroll_per">
<!-- <span>Estimated Percentage that will enroll</span> -->
</div>
<div class="range_slider">
<span class="pull-left">0%</span>
<span class="pull-right">100%</span>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="1" class="slider" id="myRange" ng-model="leg_ser.enroll_per">
</div>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Annual Cost per Employees?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="number" class="form-control" placeholder="Cost" name="Annual Cost per Employees" ng-model="leg_ser.annual_cost">
<!-- <span>Avarage Salary and benifits per Employee</span> -->
</div>
<div class="range_slider">
<span class="pull-left">$0</span>
<span class="pull-right">$300k</span>
<div id="slidecontainer">
<input type="range" min="0" max="300000" value="0" class="slider" id="myRange" ng-model="leg_ser.annual_cost">
</div>
</div>
</div>
</div>
</form>
Add following code in the script tag
<!-- RANGE SLIDER JS START -->
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<!-- RANGE SLIDER JS OVER -->
Above script working good for me, should work for you too.