Select & Slider

mat-select with single and multi selection, mat-slider with thumb value display.

Single Selection

mat-select with outline appearance and single option selection.

Selected: us

Code
<mat-form-field appearance="outline" class="w-full max-w-xs">
  <mat-label>Country</mat-label>
  <mat-select [(value)]="selectedCountry">
    <mat-option value="us">United States</mat-option>
    <mat-option value="de">Germany</mat-option>
    <mat-option value="fr">France</mat-option>
    <mat-option value="jp">Japan</mat-option>
  </mat-select>
</mat-form-field>

Multi Selection

mat-select with multiple attribute allowing several options.

Selected: angular

Code
<mat-form-field appearance="outline" class="w-full max-w-xs">
  <mat-label>Skills</mat-label>
  <mat-select [(value)]="selectedSkills" multiple>
    <mat-option value="angular">Angular</mat-option>
    <mat-option value="react">React</mat-option>
    <mat-option value="vue">Vue</mat-option>
  </mat-select>
</mat-form-field>

Basic Slider

mat-slider with min/max/step and thumb value display.

Value: 42

Code
<mat-slider min="0" max="100" step="1">
  <input matSliderThumb [(value)]="sliderValue" />
</mat-slider>