AngularJS slider (wrapped jquery-ui slider)

Angularjs range slider

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">
        Low: {{low}}
        High: {{high}}
        <br><br>
        <div striderslider config="sliderConfig" low="low" high="high" class=""></div>
        Price: {{price}}
    </div>
</div>

CSS

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

.ui-slider {
    background: green;
}
.ui-slider-range {
    background: green;
}
#YourDiv {
    float: right;
    height: 100%;
    background: green;
    border-radius: 0 4px 4px 0;
}

JavaScript

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

myApp.controller("SomeController", function($scope) {
    
    $scope.sliderConfig = {
        min: 0,
        max: 20,
        step: 0.5
    }
    
    $scope.low = 3;
    $scope.high = 5;
    
    $scope.setPrice = function(price) {
        $scope.price = price;    
    }
});

myApp.directive("striderslider", function() {
    return {
        restrict: 'A',
        scope: {
            config: "=config",
            low: "=low",
            high: "=high"
        },
        link: function(scope, elem, attrs) {
            var setModel = function(value) {
                scope.model = value;   
            }
            
            $(elem).slider({
                range: true,
	            min: scope.config.min,
	            max: scope.config.max,
                step: scope.config.step,
                values: [scope.low, scope.high],
                slide: function(event, ui) { 
                    scope.$apply(function() {
                        scope.price = ui.value;
                        scope.low = ui.values[0];
                        scope.high = ui.values[1];
                    });
                    $('#YourDiv').css('width', 100 - ui.values[1] +'%');
	            }
	        }).append('<div id="YourDiv" style="width: 50%"></div>');
    	}
    }
});