range slider css

.range-slider-container {
  position:relative;
  width:100%;
  height:100px;
}

.range-slider-left {
  position:absolute;
  top:0;
  width:100%;
  md-slider .md-track-container .md-track.md-track-fill {
    background-color:rgb(132,132,132);
  }
}

.range-slider-right {
  position:absolute;
  top:0;
  right:0px;
}

// Overwrite specific to range adaptation
.range-slider-right md-slider .md-thumb-container {
  transition: -webkit-transform 0s linear;
  transition: transform 0s linear;
}

.range-slider-left md-slider.md-default-theme .md-track.md-track-fill {
  background-color:rgba(0,0,0,0.26) !important;
}

range slider directive

angular.module('directives.rangeSlider',['material.components.slider'])
.directive('rangeSlider', function ($compile) {
  return {
    restrict: "E",
    replace: true,
    scope: {
      max:'=',
      min:'=',
      minGap: '=',
      step:'=',
      lowerValue: "=lowerValue",
      upperValue: "=upperValue"
    },
    controller: function($scope) {
      $scope.lowerMax = $scope.max - $scope.step;
      $scope.upperMin = $scope.lowerValue + $scope.step;

      $scope.lowerValue = $scope.min;
      $scope.upperValue = $scope.max;

      $scope.$watch('lowerValue',function(){
        $scope.upperMin = $scope.lowerValue + $scope.step;
        $scope.upperWidth = ((($scope.max-($scope.lowerValue + $scope.step))/$scope.max) * 100) + "%";
        if($scope.lowerValue > ($scope.upperValue - $scope.minGap) && $scope.upperValue < $scope.max) {
          $scope.upperValue = $scope.lowerValue + $scope.minGap;
        }
      })
    },
    templateUrl:'app/common/sliders/range-slider.tpl.html',
    link: function (scope, element, attrs) {

    }
  }
})

range slider template

<div class='range-slider-container'>
  <div class='range-slider-left'>
    <md-slider aria-label="upperValue" ng-model="lowerValue" min='{{min}}' max='{{lowerMax}}'></md-slider>
  </div>
  <div class='range-slider-right' ng-style="{width: upperWidth}">
    <md-slider aria-label="upperValue" ng-model="upperValue" min="{{upperMin}}" max="{{max}}"></md-slider>
  </div>
</div>