AngularJS range slider update max.

by razh

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
    <input class="slider" type="range" ng-model="config.position" ng-max="config.max"/>
    <div>{{ config.position }}</div>
    <div>{{ config.max }}</div>
    <input type="number" ng-model="config.max"/>
</div>

CSS

input[type=range] {
    -webkit-appearance: none;
    background-color: #CCC;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #555;
}

JavaScript

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

app.controller('MainCtrl', function($scope) {
    $scope.config = {
        position: 0,
        max: 0
    };

    setInterval(function() {
        $scope.config.max += 10;
        $scope.$apply();
    }, 500);
});

app.directive('slider', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
            scope.$watch(attrs.ngMax, function() {
                element.attr('max', scope.$eval(attrs.ngMax));
            });
        }
    };
});