Limits in Angular Range Slider component

26 Feb 20267 minutes to read

The limits property restricts slider thumb movement within specified boundaries. Use limits when certain value ranges would negatively impact your process or product, or when you need to lock specific handles in place.

The following are the six options in the slider’s limits object. Each API in the limits object is optional.

• enabled: Enables the limits in the Slider.
• minStart: Sets the minimum limit for the first handle.
• minEnd: Sets the maximum limit for the first handle.
• maxStart: Sets the minimum limit for the second handle.
• maxEnd: Sets the maximum limit for the second handle.
• startHandleFixed: Locks the first handle.
• endHandleFixed: Locks the second handle.

Default and MinRange Slider limits

The Default and MinRange Slider types have a single handle, so only minStart, minEnd, and startHandleFixed options apply. When limits are enabled, the restricted area appears darkened, making the allowed and restricted zones visually distinct.

Refer to the following snippet to enable the limits in the Slider.

    ......

    limits: { enabled: true, minStart: 10, minEnd: 40 }

    ......

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

export class AppComponent {
  public type: string = "MinRange";
  public value: number = 30;
  public tooltip: object = { isVisible: true };
  public min: number = 0;
  public max: number = 100;
  public limits: object = { enabled: true, minStart: 10, minEnd: 40 };
}

main.ts

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

Range Slider limits

In the Range Slider, both handles can be restricted and locked from the limit’s object. In this sample, the first handle is limited between 10 and 40, and the second handle is limited between 60 and 90.

    ......

    limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 }

    ......

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

export class AppComponent {
    public type: string = "Range";
    public value: number[] = [30, 70];
    public tooltip: object = { isVisible: true };
    public min: number = 0;
    public max: number = 100;
    public limits: object = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
}

main.ts

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

Handle lock

Lock slider handle movement by enabling the startHandleFixed and endHandleFixed properties. The following example locks both slider handles to prevent value changes.

    ......

    limits: { enabled: true, startHandleFixed: true, endHandleFixed: true }

    ......

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

export class AppComponent {
  public type: string = "Range";
  public value: number[] = [30, 70];
  public tooltip: object = { isVisible: true };
  public min: number = 0;
  public max: number = 100;
  public limits: object = { enabled: true, startHandleFixed: true, endHandleFixed: true };
}

main.ts

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