Format in Angular Range Slider component

26 Feb 20266 minutes to read

The format property customizes how Slider values are displayed. Formatted values are also applied to ARIA attributes for accessibility. Two approaches are available for implementing value formatting.

• Using the format property: Leverage the built-in Internationalization support to apply predefined formats to slider values.

• Using events: Customize formatting with the renderingTicks and tooltipChange events for more advanced transformations.

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'>
            <ejs-slider id='slider' [min]=0 [max]=100 [value]=30 [tooltip]="tooltipData" [ticks]="ticksData" ></ejs-slider>
        </div>
    </div>`,
})

export class AppComponent {
    public tooltipData: Object = { isVisible: true, format: 'C2' };
    public ticksData: Object = { placement: 'After', format: 'C2', 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));

Using format API

The format API provides predefined formatting styles including Numeric (N), Percentage (P), Currency (C), and custom specifiers. The following example demonstrates how to format ticks and tooltip values as percentages.

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'>
            <ejs-slider id='slider'  [min]=0 [max]=1 [step]=.01 [value]=.3 [tooltip]="tooltipData" [ticks]="ticksData" ></ejs-slider>
        </div>
    </div>`
})

export class AppComponent {
    public tooltipData: Object = { placement: 'Before', isVisible: true, showOn: 'Always', format: 'P0' };
    public ticksData: Object = { placement: 'After', largeStep: .2, smallStep: .1, showSmallTicks: true, format: 'P0' };

}

main.ts

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

Using Events

With this approach, intercept slider events to apply custom formatting logic. The following sample demonstrates how to format ticks as weekday names and tooltip values as full day names.

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';
import { SliderTickEventArgs, SliderTooltipEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SliderModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <div id='container'>
        <div class='wrap'>
            <ejs-slider id='slider'  #default [min]=0 [max]=6 [value]=2 [tooltip]="tooltipData" [ticks]="ticksData"
            (tooltipChange)='tooltipChangeHandler($event)' (renderingTicks)='renderingTicksHandler($event)' ></ejs-slider>
        </div>
    </div>`,
})

export class AppComponent {
    public tooltipData: Object = { placement: 'Before', isVisible: true };
    public ticksData: Object = { placement: 'After', largeStep: 1 };

    tooltipChangeHandler(args: SliderTooltipEventArgs | any): void {
        // Weekdays Array
        let daysArr: string[] = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday'];
        // Customizing each ticks text into weeksdays
        args.text = daysArr[parseFloat(args.value)];
    }

    renderingTicksHandler(args: SliderTickEventArgs | any): void {
        // Customizing tooltip to display the Day (in numeric) of the week
        args.text = 'Day ' + (Number(args.value) + 1).toString();
    }
}

main.ts

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