AngularJS slider (wrapped jquery-ui slider)

by Himanshu Joshi

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>
    </div>
</div>

CSS

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

.ui-slider {
  background: green;
}

.ui-slider-range {
  background: yellow;
}

#YourDiv {
  float: right;
  height: 100%;
  background: red;
  border-radius: 0 4px 4px 0;
}

JavaScript

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

myApp.controller("SomeController", function($scope) {

  $scope.sliderConfig = {
    min: 0,
    max: 100,
    step: 1
  }

  $scope.low = 5;
  $scope.high = 95;

  $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>');
    }
  }
});