How to Create Range Slider in Angular with Angular Material 13

In this guide, we will show you how to build a basic range slider in angular application using the angular material slider component.

A slider component lets users pick from a range of values by moving the slider thumb horizontally or vertically. It is almost identical to the behaviour of the input type=”range” element.

A slider component comes with blur and focus methods. The blur method blur the host element, whereas the focus method sets focus on the host element.

The slider user interface component is implemented using the MatSlider directive in angular. It offers tons of properties that allow you to handle the behaviours of the slider component.

To know more about slider properties, make sure to check out the official documentation of material sliders here.

Angular Material Range Slider Example

  • Step 1: Generate Angular App
  • Step 2: Add Material Module
  • Step 3: Set Up Material Modules File
  • Step 4: Create Simple Slider Component
  • Step 5: Create Range Slider with Custom Thumb Label
  • Step 6: Run App in Browser

Generate Angular App

Type the command then execute the command to install the angular command line interface tool:

npm install -g @angular/cli

After the angular cli is installed you are now ready to create the new angular application:

ng new ng-material-demo

Use command to enter into the app directory:

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Add Material Module

You have to run the given command to install the angular material library in angular app:

ng add @angular/material

When you invoke the above command, some questions will manifest on your terminal screen; choose them to set up material in angular:

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Open the styles.scss file, add the material theme css within the file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Set Up Material Modules File

Create material.module.ts file within the src/ directory, in this file you have to import MatSliderModule and along with rest of the other material modules.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

In this step, you have to add the MaterialModule, CUSTOM_ELEMENTS_SCHEMA, FormsModule, and ReactiveFormsModule modules in the app.module.ts file.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Create Simple Slider Component

Here is the simple code example for making the slider component; you have to define the mat-slider directive in the angular html template.

<mat-slider aria-label="unit(s)"></mat-slider>

Create Range Slider with Custom Thumb Label

We can use the mat-slider properties to add the custom thumb label in the slider component.

Add the given code in angular html template

<mat-slider
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="1000"
  step="1000"
  min="0"
  max="100000"
  aria-label="units"></mat-slider>

Define the custom function in the angular typescript template:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  formatLabel(value: number) {
    if (value >= 1000) {
      return Math.round(value / 1000) + 'k';
    }

    return value;
  }
}

Run App in Browser

To start the development server, you have to invoke the following command:

ng serve --open

The above command will open the app on the browser with the following url:

http://localhost:4200

How to Create Range Slider in Angular with Angular Material 13

Conclusion

In this tutorial, we have understood how to use the mat slider module to build the simple range slider in angular; we used the angular material library to create the slider component.

A slider component allows us to choose values from the two given ranges, and its range slider is pretty easy to implement in angular.