AngularJS color picker / slider

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<div class="container" ng-app ng-controller="Ctrl">
 <div class="page-header">
  <h1><small>angular.js </small>
   colorpicker
     <small>rgba</small>
      </h1>
 </div>
<!--[if lt IE 10]><div class="alert span5">Sorry, you need a <a href='http://browsehappy.com/'>modern browser</a> to display this correctly
  </div><![endif]-->    
 <div class="img-rounded" id="swatch" style="background:rgba({{red}},{{green}},{{blue}},{{opacity}})"></div>
 <br>
 <div class="control-group">

  
  <input id="opacity" max="1.0" min="0" ng-model="opacity" step="0.01" type="range">
  <output>{{opacity}}</output>
 </div>

</div>

CSS

input[type="range"] {
 -webkit-appearance: none !important;
 border: 1px inset white;
 cursor: pointer;
 width: 350px;
}
input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 background-color: #666;
 height: 26px;
 opacity: 0.5;
 width: 10px;
}

#opacity {
 background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0)), to(rgba(0, 0, 0, 1.0)));
}
#swatch {
 border: 1px solid rgba(0, 0, 0, 0.3);
 height: 100px;
}

JavaScript

function Ctrl($scope) {
    $scope.red = '0';
    $scope.green = '0';
    $scope.blue = '0';
    $scope.opacity = '0.7';

}
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
  alert("Firefox doesn't play well with HTML5 input type='range'. Yet.");
}