Ticks in Angular Range Slider component

26 Feb 20267 minutes to read

The ticks property adds visual reference points to the slider, helping users identify available values. Ticks are configured using smallStep (minor ticks) and largeStep (major ticks). By default, only major tick values are displayed. Use the showSmallTicks property to show or hide minor ticks.

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'  [tooltip]= 'tooltip' [ticks]='ticks' [value] = 'value' ></ejs-slider>
      </div>
    </div>`,
})

export class AppComponent {
  public value: number = 30;
  public tooltip: Object = { placement: 'Before', isVisible: true, showOn: 'Always' };
  public ticks: Object = { placement: 'After', largeStep: 20, smallStep: 10, showSmallTicks: true };
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

.wrap {
    box-sizing: border-box;
    height: 260px;
    margin: 0 auto;
    padding: 30px 10px;
    width: 260px;
}

main.ts

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

Step

The step property controls the increment value when the slider is moved. By default, values increase or decrease by 1. Customize this value to suit your application requirements.

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' [value]='value' [tooltip]="tooltip" [ticks] = 'ticks' [step] = 'step' ></ejs-slider>
      </div>
    </div>`,
})

export class AppComponent {
  public value: number = 30;
  public tooltip: Object = { placement: 'Before', isVisible: true, showOn: 'Always' };
  public ticks: Object = { placement: 'After', largeStep: 20, smallStep: 10, showSmallTicks: true };
  public step: number = 10;
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

.wrap {
    box-sizing: border-box;
    height: 260px;
    margin: 0 auto;
    padding: 30px 10px;
    width: 260px;
}

main.ts

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

Min and Max

Set the minimum and maximum values of the Range Slider using the min and max properties. By default, the minimum value is 1 and the maximum value is 100. The following sample demonstrates a slider configured with a minimum of 100 and maximum of 1000.

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]= 'min' [max]= 'max' [value]= 'value' [tooltip]='tooltip'
            [ticks] = 'ticks' ></ejs-slider>
        </div>
    </div>`,
})

export class AppComponent {
    public min: number = 0;
    public max: number = 100;
    public value: number = 30;
    public ticks: Object = { placement: 'After', largeStep: 20, smallStep: 10, showSmallTicks: true };
    public tooltip: Object = { placement: 'Before', isVisible: true, showOn: 'Always' };
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

.wrap {
    box-sizing: border-box;
    height: 260px;
    margin: 0 auto;
    padding: 30px 10px;
    width: 260px;
}

main.ts

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