Using the example demonstrated here, I have successfully customized the slider as per the specifications.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Rating</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6979891839a9784d89c85b6c7d8c2d8c6db94938297d8c0">[email protected]</a>" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="testController">
<table>
<tr>
<td>Amount:</td>
<td><div slider ng-model="amount" style="width:200px;"></div></td>
<td><input type= "text" ng-model="amount" id="txtAmount"></td>
</tr>
</table>
</div>
</body>
</html>
test.js
var myApp = angular.module("myApp", []);
myApp.controller("testController", function($scope, $http){
$scope.amount = 1;
}); //end controller
myApp.directive('slider', function() {
return {
restrict: 'A',
scope: {
ngModel: '='
},
link: function(scope, elem, attrs) {
console.log(scope.ngModel);
return $(elem).slider({
range: "min",
animate: true,
value: scope.ngModel,
slide: function(event, ui) {
return scope.$apply(function(){
scope.ngModel = ui.value;
});
}
});
}
};
});
The issue arises when:
a) Setting the maximum range beyond 100 seems to be a challenge. How can I make the minimum value 1 and the maximum value 1000?
https://i.sstatic.net/vchrC.png
b) Two-way binding does not seem to be functioning properly. For instance, if I set the value of "txtAmount" to 50, the slider should reflect that value (50)