Angular: jQ-UI Slider

http://angularjs.org/

by bartek

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div id="demoing" ng-controller="Demo" ng-model="time">
    <p>Schlide the schlider and the value below will change.</p>
    <jq-schlider ng-enabled="time.enabled" max="time.max" at="time.at" ></jq-schlider>
    <p>This is a representation of the model "time" and the value at :   <span>{{ time.at }}</span></p>
</div>

CSS

#demoing{
    width:300px;
}

p{
    padding: 1em;
}

span{
    font-size: 1.5em;
    font-weight: bold;
}

JavaScript

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

myApp.controller("Demo", ["$scope", function ($scope) {
    $scope.time ={
        max: 10,
        at: 5,
        enabled: true
    };
}]);

angular.module('Components', [])
    .directive('jqSchlider', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div id="schlider"></div>',
        scope: {
            'ngEnabled': '=',
                'max': '=',
                'at': '='
        },
        link: function (scope, element, attrs) {
            element.slider({
                stop: function (event, ui) {}
            });
            element.on('slidestop', function (event, ui) {
                scope.$apply(function () {
                    
                    scope.$parent.time.at = ui.value;
                });
            });
            scope.$watch('max', function (value) {
                element.slider('option', 'max', value);
            });
            scope.$watch('at', function (value) {
                element.slider('option', 'value', value);
            });
            scope.$watch('ngEnabled', function (value) {
                element.attr('enabled', value);
                if (value) {
                    element.slider('enable');
                } else {
                    element.slider('disable');
                }
            });
        }
    };
});