Angular

Search results

Getting started in Angular Range Slider component

03 Oct 2022 / 6 minutes to read

The Slider component is available in @syncfusion/ej2-angular-inputs package. Utilize this package to render the Slider Component.

Setting up angular project

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli

Create a new application

ng new syncfusion-angular-app

By default, it install the CSS style base application. To setup with SCSS, pass —style=SCSS argument on create project.

Example code snippet.

ng new syncfusion-angular-app --style=SCSS

Navigate to the created project folder.

cd syncfusion-angular-app

Installing Syncfusion RangeSlider Package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular Syncfusion package from npm link.

Currently, Syncfusion provides two types of package structures for Angular components,

Ivy library distribution package format
Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

Syncfusion Angular packages(>=20.2.36) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.

Add @syncfusion/ej2-angular-inputs package to the application.

npm install @syncfusion/ej2-angular-inputs --save

Angular compatibility compiled package(ngcc)

For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc package use the below.

Add @syncfusion/ej2-angular-inputs@ngcc package to the application.

npm install @syncfusion/ej2-angular-inputs@ngcc --save

To mention the ngcc package in the package.json file, add the suffix -ngcc with the package version as below.

@syncfusion/ej2-angular-inputs:"20.2.38-ngcc"

Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

Adding Slider Module

After installing the package, the component modules are available to configure into your application from installed syncfusion package. Syncfusion Angular package provides two different types of ngModules.

Refer to Ng-Module to learn about ngModules.

Refer to the following snippet to import the Slider module in app.module.ts from the @syncfusion/ej2-angular-inputs.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

// Imported syncfusion Slider module from inputs package
import { SliderModule } from '@syncfusion/ej2-angular-inputs';

@NgModule({
  declarations: [
AppComponent
  ],
  imports: [
BrowserModule,
FormsModule,
HttpModule,

// Registering EJ2 Slider Module
SliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Syncfusion Slider Component

Add the Slider component snippet in app.component.ts as follows.

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

@Component({
  selector: 'my-app',
  template: `
  <h1>
Hello Angular, Syncfusion Angular UI Slider!
  </h1>

  <ejs-slider id='slider' [value]=30></ejs-slider>
 `
 })
export class AppComponent {
}

Adding Slider CSS reference

Add Slider component styles as given in the angular-cli.json file within the apps -> styles section.

Note: If you are using Angular 6 project, add the changes in angular.json file.

{
  "apps": [
{
  "styles": [
    "styles.css",
    "./node_modules/@syncfusion/ej2-angular-inputs/styles/material.css",
    "../node_modules/@syncfusion/ej2-base/styles/material.css",
    "../node_modules/@syncfusion/ej2-buttons/styles/material.css",
    "../node_modules/@syncfusion/ej2-popups/styles/material.css"
  ]
}
  ]
}

The below example shows a basic Slider example.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

index.css

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

@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css'],
})

export class AppComponent {
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SliderModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<div id='container'>
    <div class='wrap'>
        <ejs-slider id='slider' [value]=30></ejs-slider>
    </div>
</div>

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

Types

The types of Slider are as follows:

Types	Usage
Default	Shows a default Slider to select a single value.
MinRange	Displays the shadow from the start value to the current selected value.
Range	Selects a range of values. It also displays the shadow in-between the selection range.

Both the Default Slider and Min-Range Slider have same behavior that is used to select a single value. In Min-Range Slider, a shadow is considered from the start value to current handle position. But the Range Slider contains two handles that is used to select a range of values and a shadow is considered in between the two handles.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

index.css

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

@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})

export class AppComponent {
  public minType: string = "MinRange";
  public rangeType: string = "Range";
  public minValue: number = 30;
  public rangeValue: number = [30, 70];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SliderModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<div id='container'>
    <div class='wrap'>
        <div class="sliderwrap">
            <label class="labeltext">Default</label>
            <ejs-slider id='default' [value]=30></ejs-slider>
        </div>
        <div class="sliderwrap">
            <label class="labeltext">MinRange</label>
            <ejs-slider id='minrange' [type]="minType" [value]='minValue'></ejs-slider>
        </div>
        <div class="sliderwrap">
            <label class="labeltext">Range</label>
            <ejs-slider id='range' [type]="rangeType" [value]='rangeValue'></ejs-slider>
        </div>
    </div>
</div>

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

.sliderwrap {
  margin-top: 20px;
}

.sliderwrap label {
  font-size: 13px;
  font-weight: 100;
  margin-top: 15px;
  padding-bottom: 15px;
}

Customization

Orientation

The Slider can be displayed, either in horizontal or vertical orientation. By default, the Slider renders in horizontal orientation.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

index.css

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

@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})

export class AppComponent {
  public orientation="Vertical"
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SliderModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<div id='container'>
    <div class='wrap'>
        <ejs-slider id='slider'  [orientation]= 'orientation' [value]=30></ejs-slider>
    </div>
</div>

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

The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the placement property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

index.css

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

@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})

export class AppComponent {
  public type: string ="MinRange";
  public tooltip: Object ={ placement: 'After', isVisible: true, showOn: 'Always' };
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SliderModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<div id='container'>
    <div class='wrap'>
        <ejs-slider id='slider'  [type]= 'type' [tooltip] = 'tooltip' [value]=30></ejs-slider>
    </div>
</div>

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

Buttons

The Slider value can be changed by using the Increase and Decrease buttons. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value.

After enabling the slider buttons if the ‘Tab’ key is pressed, the focus goes to the handle and not to the button.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

index.css

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

@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})

export class AppComponent {
  public type: string ="Range";
  public value: number[] =[30, 70];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SliderModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<div id='container'>
    <div class='wrap'>
        <ejs-slider id='slider'  [type]= 'type' [showButtons]=true [value] = 'value' ></ejs-slider>
    </div>
</div>

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

Getting started in Angular Range Slider component

Setting up angular project

Create a new application

Installing Syncfusion RangeSlider Package

Ivy library distribution package

Angular compatibility compiled package(ngcc)

Adding Slider Module

Adding Syncfusion Slider Component

Adding Slider CSS reference

Types

Customization

Orientation

Tooltip

Buttons

See Also