ipsos-components/src/demo-app/a11y/slider/slider-a11y.html

Material Design components for Angular

<section>
  <h2>Continuous slider (e.g. color component sliders)</h2>
  <p>Move the red, green, and blue sliders to choose a color.</p>
  <div class="demo-color-container">
    <div class="demo-color-sliders">
      <div>
        <label class="demo-color-label" for="r-slider">Red</label>
        <mat-slider id="r-slider" min="0" max="255" [(ngModel)]="red"></mat-slider>
      </div>
      <div>
        <label class="demo-color-label" for="g-slider">Green</label>
        <mat-slider id="g-slider" min="0" max="255" [(ngModel)]="green"></mat-slider>
      </div>
      <div>
        <label class="demo-color-label" for="b-slider">Blue</label>
        <mat-slider id="b-slider" min="0" max="255" [(ngModel)]="blue"></mat-slider>
      </div>
    </div>
  <div class="demo-color-swatch" [style.background]="swatchBackground"></div>
  </div>
</section>

<section>
  <h2>Discrete slider (e.g. rate a product)</h2>
  <p>Please rate our product on a scale of 1 (not satisfied) to 5 (extremely satisfied).</p>
  <mat-slider min="1" max="5" tickInterval="1" thumbLabel aria-label="Rating"></mat-slider>
</section>

<section>
  <h2>Vertical slider (e.g. volume control)</h2>
  <p>Use the slider to adjust the volume.</p>
  <div class="demo-volume-container">
    <label for="vol-slider">
      <mat-icon aria-hidden>volume_up</mat-icon>
      <span class="cdk-visually-hidden">Volume</span>
    </label>
    <mat-slider id="vol-slider" min="0" max="100" vertical inverted></mat-slider>
  </div>
</section>