AngularJS slider (wrapped jquery-ui slider)

by rahilwazir

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<div ng-app="myApp">
    <div ng-controller="SomeController">
        Price: {{price}}
        <div slider="" config="sliderConfig" ng-model="price" class="cdbl-slider"></div>
    </div>
</div>

CSS

.cdbl-slider {
    width: 200px;
    margin: 10px;    
}

JavaScript

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

myApp.controller("SomeController", function($scope) {
    $scope.sliderConfig = {
        min: 50,
        max: 500,
        step: 1
    };
    
    $scope.price = 50;
    
    $scope.setPrice = function(price) {
        $scope.price = price;    
    };
});

myApp.directive("slider", function() {
    return {
        require: '?ngModel',
        restrict: 'A',
        scope: {
            config: "=config",
        },
        link: function(scope, elem, attrs, ng_model) {
            $(elem).slider({
                range: false,
	            min: scope.config.min,
	            max: scope.config.max,
                step: scope.config.step,
                slide: function(event, ui) { 
                    scope.$apply(function() {
                        scope.$parent.price = ui.value;
                        ng_model.$setViewValue(ui.value);
                    });
	            }
	        });
    	}
    }
});