slider-demo.html

<mat-checkbox [color]="colorModel" [(ngModel)]="discrete">Discrete</mat-checkbox>
<br>
<mat-checkbox [color]="colorModel" [(ngModel)]="showTickMarks">Show tick marks</mat-checkbox>
<br>
<mat-button-toggle-group [(ngModel)]="colorModel" aria-label="Slider color options">
  <mat-button-toggle value="primary">Primary</mat-button-toggle>
  <mat-button-toggle value="accent">Accent</mat-button-toggle>
  <mat-button-toggle value="warn">Warn</mat-button-toggle>
</mat-button-toggle-group>

<mat-tab-group [color]="colorModel">
  <mat-tab label="Reactive form controls">
    <table class="demo-data-table">
      <tr>
        <th class="demo-table-header">Inputs</th>
        <th class="demo-table-header">Controls</th>
        <th class="demo-table-header">Native Slider</th>
        <th class="demo-table-header">Single Slider</th>
        <th class="demo-table-header">Double Slider</th>
      </tr>
      <tr>
        <th class="demo-table-header">Value</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" (input)="updateControlValue($event.target)" /></td>
        <td class="demo-value-cell">{{nativeSlider1.value}}</td>
        <td class="demo-value-cell">{{ngThumb1.value}}</td>
        <td class="demo-value-cell">{{ngStartThumb1.value}} : {{ngEndThumb1.value}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Disabled</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="checkbox" (input)="updateControlDisabledState($event.target)" /></td>
        <td class="demo-value-cell">{{nativeSlider1.disabled}}</td>
        <td class="demo-value-cell">{{ngThumb1.disabled}}</td>
        <td class="demo-value-cell">{{ngStartThumb1.disabled}} : {{ngEndThumb1.disabled}}</td>
      </tr>
    </table>
    
    <input class="demo-native-slider" type="range" [formControl]="control" #nativeSlider1 />
    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
      <input matSliderThumb [formControl]="control" #ngThumb1 />
    </mat-slider>
    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
      <input matSliderStartThumb [formControl]="control" #ngStartThumb1 />
      <input matSliderEndThumb #ngEndThumb1 />
    </mat-slider>
  </mat-tab>

  <mat-tab label="Template-driven form controls">
    <table class="demo-data-table">
      <tr>
        <th class="demo-table-header">Inputs</th>
        <th class="demo-table-header">Controls</th>
        <th class="demo-table-header">Native Slider</th>
        <th class="demo-table-header">Slider</th>
        <th class="demo-table-header">Range Slider</th>
      </tr>
      <tr>
        <th class="demo-table-header">Value</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" [(ngModel)]="valueModel" /></td>
        <td class="demo-value-cell">{{nativeSlider2.value}}</td>
        <td class="demo-value-cell">{{ngThumb2.value}}</td>
        <td class="demo-value-cell">{{ngStartThumb2.value}} : {{ngEndThumb2.value}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Min</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" [(ngModel)]="minModel" /></td>
        <td class="demo-value-cell">{{nativeSlider2.min}}</td>
        <td class="demo-value-cell">{{ngThumb2.min}}</td>
        <td class="demo-value-cell">{{ngStartThumb2.min}} : {{ngEndThumb2.min}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Max</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" [(ngModel)]="maxModel" /></td>
        <td class="demo-value-cell">{{nativeSlider2.max}}</td>
        <td class="demo-value-cell">{{ngThumb2.max}}</td>
        <td class="demo-value-cell">{{ngStartThumb2.max}} : {{ngEndThumb2.max}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Step</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" [(ngModel)]="stepModel" /></td>
        <td class="demo-value-cell">{{nativeSlider2.step}}</td>
        <td class="demo-value-cell">{{ngThumb2.step}}</td>
        <td class="demo-value-cell">{{ngStartThumb2.step}} : {{ngEndThumb2.step}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Disabled</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="checkbox" [(ngModel)]="disabledModel" /></td>
        <td class="demo-value-cell">{{nativeSlider2.disabled}}</td>
        <td class="demo-value-cell">{{ngThumb2.disabled}}</td>
        <td class="demo-value-cell">{{ngStartThumb2.disabled}} : {{ngEndThumb2.disabled}}</td>
      </tr>
    </table>
    
    <input class="demo-native-slider" type="range" #nativeSlider2 [(ngModel)]="valueModel" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel" />
    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel">
      <input matSliderThumb #ngThumb2 [(ngModel)]="valueModel" />
    </mat-slider>
    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="minModel" [max]="maxModel" [step]="stepModel" [disabled]="disabledModel">
      <input matSliderStartThumb #ngStartThumb2 [(ngModel)]="valueModel" />
      <input matSliderEndThumb #ngEndThumb2 />
    </mat-slider>
  </mat-tab>

  <mat-tab label="One-way property bindings">
    <table class="demo-data-table">
      <tr>
        <th class="demo-table-header">Inputs</th>
        <th class="demo-table-header">Controls</th>
        <th class="demo-table-header">Native Slider</th>
        <th class="demo-table-header">Slider</th>
        <th class="demo-table-header">Range Slider</th>
      </tr>
      <tr>
        <th class="demo-table-header">Value</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" (input)="updateValue($event.target)" [value]="value" /></td>
        <td class="demo-value-cell">{{nativeSlider3.value}}</td>
        <td class="demo-value-cell">{{ngThumb3.value}}</td>
        <td class="demo-value-cell">{{ngStartThumb3.value}} : {{ngEndThumb3.value}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Min</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" (input)="updateMin($event.target)" [value]="min" /></td>
        <td class="demo-value-cell">{{nativeSlider3.min}}</td>
        <td class="demo-value-cell">{{ngThumb3.min}}</td>
        <td class="demo-value-cell">{{ngStartThumb3.min}} : {{ngEndThumb3.min}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Max</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" (input)="updateMax($event.target)" [value]="max" /></td>
        <td class="demo-value-cell">{{nativeSlider3.max}}</td>
        <td class="demo-value-cell">{{ngThumb3.max}}</td>
        <td class="demo-value-cell">{{ngStartThumb3.max}} : {{ngEndThumb3.max}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Step</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" (input)="updateStep($event.target)" [value]="step" /></td>
        <td class="demo-value-cell">{{nativeSlider3.step}}</td>
        <td class="demo-value-cell">{{ngThumb3.step}}</td>
        <td class="demo-value-cell">{{ngStartThumb3.step}} : {{ngEndThumb3.step}}</td>
      </tr>
      <tr>
        <th class="demo-table-header">Disabled</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="checkbox" (input)="updateDisabledState($event.target)" [value]="disabled" /></td>
        <td class="demo-value-cell">{{nativeSlider3.disabled}}</td>
        <td class="demo-value-cell">{{ngThumb3.disabled}}</td>
        <td class="demo-value-cell">{{ngStartThumb3.disabled}} : {{ngEndThumb3.disabled}}</td>
      </tr>
    </table>

    <input class="demo-native-slider" type="range" #nativeSlider3 [value]="value" [min]="min" [max]="max" [step]="step" [disabled]="disabled" />
    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="min" [max]="max" [step]="step" [disabled]="disabled">
      <input matSliderThumb #ngThumb3 [value]="value" />
    </mat-slider>
    <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel" [min]="min" [max]="max" [step]="step" [disabled]="disabled">
      <input matSliderStartThumb #ngStartThumb3 [value]="value" />
      <input matSliderEndThumb #ngEndThumb3 />
    </mat-slider>
  </mat-tab>

  <mat-tab label="Two-way property bindings">
    <table class="demo-data-table">
      <tr>
        <th class="demo-table-header">Inputs</th>
        <th class="demo-table-header">Controls</th>
        <th class="demo-table-header">Slider</th>
        <th class="demo-table-header">Range Slider</th>
      </tr>
      <tr>
        <th class="demo-table-header">Value</th>
        <td class="demo-control-cell"><input class="demo-slider-control" type="number" [(ngModel)]="twoWayValue" /></td>
        <td class="demo-value-cell">{{ngThumb4.value}}</td>
        <td class="demo-value-cell">{{ngStartThumb4.value}} : {{ngEndThumb4.value}}</td>
      </tr>
    </table>
    
      <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
        <input matSliderThumb #ngThumb4 [(value)]="twoWayValue" />
      </mat-slider>
      <mat-slider [discrete]="discrete" [showTickMarks]="showTickMarks" [color]="colorModel">
        <input matSliderStartThumb #ngStartThumb4 [(value)]="twoWayValue" />
        <input matSliderEndThumb #ngEndThumb4 />
      </mat-slider>
  </mat-tab>

  <mat-tab label="Slider in a dialog">
    <div class="demo-dialog-trigger-container">
      <button mat-raised-button [color]="colorModel" (click)="openDialog()">Open dialog</button>
    </div>
  </mat-tab>
</mat-tab-group>