AngularJS: Input=range

http://angularjs.org/

by jestho

HTML

<form ng-controller="MyCtrl">    
    <p>Static min=0 / max=1000 / value=500. <span class="success">Works as expected</span></p>
    <div>
        <slider min="0" max="1000" value="500" ng-model="static" ng-init="static=500" />
        {{static}}
    </div>
    
    <p>Dynamic min={{field.min}} / max={{field.max}}  / value={{field.value}}. <strike class="stupid">Acts weird</strike> <span class="success">Works!</span></p>
    <div>
        <slider min="{{field.min}}" max="{{field.max}}" value="{{field.value}}" ng-model="field.value" />
        {{field.value}}
    </div>
    
    <p>Alternative dynamic min={{field2.min}} / max={{field2.max}} / value={{field2.value}}. <span class="success">Works as expected</span></p>
    <div>
        <slider min="{{field2.min}}" max="{{field2.max}}" value="{{field2.value}}" ng-model="field2.value" />
        {{field2.value}}
    </div>
</form>

CSS

div {
   padding: 20px; 
}
.success {
    background: green;
    color: white;
}
.stupid {
    background: red;
    color: white;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {    
    $scope.field = {
        'value' : 500,
        'min' : 0,
        'max' : 1000
    }
    $scope.field2 = {
        'value' : 50,
        'min' : 0,
        'max' : 100
    }
});

myApp.directive('slider', function() {
    return {
        restrict: 'E',
        template: '<input type="range">',
        replace: true,
        transclude: true,
        link: function($scope, elem, attr) {
            elem.attr('max', attr.max);
        }
    }
});