Numeric Range Slider in Angular

26 Feb 20263 minutes to read

Format numeric values displayed in Range Slider to meet your application requirements. Apply decimal precision, fixed whole numbers, or unit representations (e.g., “$100”, “50%”). The following sample demonstrates numeric formatting techniques.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';

@Component({
    imports: [
        SliderModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <div id='container'>
        <div class='wrap'>
            <div class='label'>Slider formatted with unit representation</div>
            <ejs-slider id='slider' [min]=0 [max]=100 [value]=30 [tooltip]="tooltipData01" [ticks]="ticksData01"></ejs-slider>
        </div>

        <div class='wrap'>
            <div class='label'>Slider formatted with three decimal specifiers</div>
            <ejs-slider id='slider1' [min]=0.1 [max]=0.2 [step]=0.01 [value]=0.13 [tooltip]="tooltipData02" [ticks]="ticksData02"></ejs-slider>
        </div>

        <div class='wrap'>
            <div class='label'>Slider formatted with two leading zeros</div>
            <ejs-slider id='slider2' [min]=0 [max]=100 [value]=30 [tooltip]="tooltipData03" [ticks]="ticksData03"></ejs-slider>
        </div>
    </div>`,
})

export class AppComponent {
    public tooltipData01: Object = { isVisible: true, format: '##.## Km' };
    public ticksData01: Object = { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true };

    public tooltipData02: Object = { isVisible: true, format: '##.#00' };
    public ticksData02: Object = { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true };

    public tooltipData03: Object = { isVisible: true, format: '00##' };
    public ticksData03: Object = { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true };

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));