angular-material-npfixed/src/components/slider/demoVertical/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="AppCtrl" ng-cloak>
  <md-content layout="row" layout-padding>
    <md-slider-container flex>
      <md-input-container>
        <input flex type="number" ng-model="vol" aria-label="volume" aria-controls="volume-slider">
      </md-input-container>
      <md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent" md-vertical
                 md-range></md-slider>
      </md-slider>
      <h5>Volume</h5>
    </md-slider-container>
    <md-slider-container flex>
      <md-input-container>
        <input flex type="number" ng-model="bass" aria-label="bass" aria-controls="bass-slider">
      </md-input-container>
      <md-slider md-discrete ng-model="bass" min="0" max="100" step="10" aria-label="bass" class="md-primary"
                 md-vertical></md-slider>
      </md-slider>
      <h5>Bass</h5>
    </md-slider-container>
    <div flex layout="column" layout-align="center center">
      <md-slider-container ng-disabled="readonly">
        <md-input-container>
          <input flex type="number" ng-model="master" aria-label="master" aria-controls="master-slider">
        </md-input-container>
        <md-slider flex ng-model="master" md-discrete aria-label="Master" md-vertical step="10"
                   ng-readonly="readonly"></md-slider>
        <h5>Master</h5>
      </md-slider-container>
      <md-checkbox ng-model="readonly">Read only</md-checkbox>
    </div>
  </md-content>
</div>