<div ng-controller="AppCtrl" ng-cloak="" class="sliderdemoBasicUsage" ng-app="MyApp">
  <md-content style="margin: 16px; padding:16px">

    <h3>
      RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </h3>

    <md-slider-container>
      <span>R</span>
      <md-slider flex="" min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider">
      </md-slider>
      <md-input-container>
        <input flex="" type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider">
      </md-input-container>
    </md-slider-container>

    <md-slider-container>
      <span>G</span>
      <md-slider flex="" ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">
      </md-slider>
      <md-input-container>
        <input flex="" type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider">
      </md-input-container>
    </md-slider-container>

    <md-slider-container>
      <span class="md-body-1">B</span>
      <md-slider flex="" ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary">
      </md-slider>
      <md-input-container>
        <input flex="" type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider">
      </md-input-container>
    </md-slider-container>

    <div style="margin-top: 50px;"></div>

    <h3>Rating: {{rating}}/5 - demo of theming classes</h3>
    <div layout="">
      <div flex="10" layout="" layout-align="center center">
        <span class="md-body-1">default</span>
      </div>
      <md-slider flex="" md-discrete="" ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
      </md-slider>
    </div>
    <div layout="">
      <div flex="10" layout="" layout-align="center center">
        <span class="md-body-1">md-warn</span>
      </div>
      <md-slider flex="" class="md-warn" md-discrete="" ng-model="rating2" step="1" min="1" max="5" aria-label="rating">
      </md-slider>
    </div>
    <div layout="">
      <div flex="10" layout="" layout-align="center center">
        <span class="md-body-1">md-primary</span>
      </div>
      <md-slider flex="" class="md-primary" md-discrete="" ng-model="rating3" step="1" min="1" max="5" aria-label="rating">
      </md-slider>
    </div>

    <div style="margin-top: 50px;"></div>

    <h3>Disabled</h3>
    <md-slider-container ng-disabled="isDisabled">
      <md-icon md-svg-icon="device:brightness-low"></md-icon>
      <md-slider ng-model="disabled1" aria-label="Disabled 1" flex="" md-discrete="" ng-readonly="readonly"></md-slider>

      <md-input-container>
        <input flex="" type="number" ng-model="disabled1" aria-label="green" aria-controls="green-slider">
      </md-input-container>
    </md-slider-container>
    <md-checkbox ng-model="isDisabled">Is disabled</md-checkbox>
    <md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider>

    <div style="margin-top: 50px;"></div>

    <h3>Disabled, Discrete, Read Only</h3>
    <md-slider ng-model="disabled2" ng-disabled="true" step="3" md-discrete="" min="0" max="10" aria-label="Disabled discrete 2"></md-slider>
    <md-slider ng-model="disabled3" ng-disabled="true" step="10" md-discrete="" aria-label="Disabled discrete 3" ng-readonly="readonly"></md-slider>
    <md-checkbox ng-model="readonly">Read only</md-checkbox>

    <div style="margin-top: 50px;"></div>
    <h3>Invert</h3>
    <md-slider-container>
      <div flex="10" layout="" layout-align="center center">
        <span class="md-body-1">Regular</span>
      </div>
      <md-slider ng-model="invert" min="0" max="100" aria-label="regular slider"></md-slider>

      <md-input-container>
        <input flex="" type="number" ng-model="invert" aria-label="regular-slider">
      </md-input-container>
    </md-slider-container>
    <md-slider-container>
      <div flex="10" layout="" layout-align="center center">
        <span class="md-body-1">Invert</span>
      </div>
      <md-slider md-invert="" ng-model="invert" min="0" max="100" aria-label="invertd slider"></md-slider>

      <md-input-container>
        <input flex="" type="number" ng-model="invert" aria-label="invert-slider">
      </md-input-container>
    </md-slider-container>

  </md-content>
</div>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at https://material.angularjs.org/HEAD/license.
-->

/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at https://material.angularjs.org/HEAD/license.
*/

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet('device', 'img/icons/sets/device-icons.svg', 24);
  })
.controller('AppCtrl', function($scope) {

  $scope.color = {
    red: Math.floor(Math.random() * 255),
    green: Math.floor(Math.random() * 255),
    blue: Math.floor(Math.random() * 255)
  };

  $scope.rating1 = 3;
  $scope.rating2 = 2;
  $scope.rating3 = 4;

  $scope.disabled1 = Math.floor(Math.random() * 100);
  $scope.disabled2 = 0;
  $scope.disabled3 = 70;

  $scope.invert = Math.floor(Math.random() * 100);

  $scope.isDisabled = true;
});


/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at https://material.angularjs.org/HEAD/license.
**/