Slider & Input(Validated) with AngularJS

by Ivan Gerasimenko

HTML

<link rel="stylesheet" href="http://prajwalkman.github.io/angular-slider/angular-slider/angular-slider.css">
<script src="http://prajwalkman.github.io/angular-slider/angular-slider/angular-slider.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>angular-slider example</title>
</head>
<body>
	
<div style="width:510px;" ng-controller="ItemCtrl">
    <div style="width:400px; float: left; margin-top: 15px;">
        <slider floor="0" ceiling="100" step="0.01" precision="2" ng-model="cost"></slider>
    </div>
    <input style="width: 70px; float: right; margin-top: 28px;" type="text" ng-model="cost" value="{{cost}}" smart-float />
</div>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
</body>
</html>

JavaScript

app = angular.module('app', ['uiSlider'])
    .directive('smartFloat',function(){
				return{
					require: "ngModel",
					link: function(scope, elm, attrs, ctrl){
						
						var regex=/^\d{1,3}([\.,](\d{1,2})?)?$/;
						ctrl.$parsers.unshift(function(viewValue){
							if( regex.test(viewValue)){
                                var floatValue = viewValue.replace(',','.');
                                floatValue = parseFloat(floatValue);
                                if(floatValue >= 0 && floatValue <=100) {
                                    ctrl.$setValidity('validFloat',true);
                                    return parseFloat(floatValue);
                                }
                                else {
                                    ctrl.$setValidity('validFloat',false);
                                }
							}
                            else{
							    ctrl.$setValidity('validFloat',false);
                            }
							return viewValue;
						});
					}
				};
			});

app.controller('ItemCtrl', ['$scope', function($scope) {
    $scope.cost = 50
}]);