Search results

Getting started with Angular Slider component

06 Oct 2021 / 5 minutes to read

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

Dependencies

Copied to clipboard
|-- @syncfusion/ej2-angular-inputs
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-buttons

Installation and configuration

  • To setup basic Angular sample use following commands.
Copied to clipboard
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

For more information about Angular application configuration, refer to Angular sample setup.

  • Install Syncfusion inputs packages using below command.
Copied to clipboard
npm install @syncfusion/ej2-angular-inputs --save

The above command installs Slider dependencies which are required to render the component in the Angular environment.

  • Syncfusion ej2-angular-inputs packages needs to be mapped in src/system.config.js file as below in the configured Angular application.
Copied to clipboard
/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
paths: {
  // paths serve as alias
  'npm:': 'node_modules/',
  'syncfusion:': 'node_modules/@syncfusion/' //syncfusion path alias
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  'app': 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  //Syncfusion packages
  '@syncfusion/ej2-angular-inputs': 'syncfusion:ej2-angular-inputs/dist/ej2-angular-inputs.umd.min.js',
  '@syncfusion/ej2-angular-base': 'syncfusion:ej2-angular-base/dist/ej2-angular-base.umd.min.js',
  '@syncfusion/ej2-inputs': 'syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js',
  '@syncfusion/ej2-base': 'syncfusion:ej2-base/dist/ej2-base.umd.min.js',
  '@syncfusion/ej2-buttons': 'syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js',
  '@syncfusion/ej2-popups': 'syncfusion:ej2-popups/dist/ej2-popups.umd.min.js',
  "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",

  // other libraries
  'rxjs': 'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: 'systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js'
  }
}
  });
})(this);

Initialize Slider

The below couple of steps describes to initialize the Slider component in Angular application.

  • Import SliderModule from @syncfusion/ej2-angular-inputs package, Inject into imports section of NgModule in the module file src/app/app.module.ts to use the Slider component across the application.
  • Now, we can render Slider component using ejs-slider tag in src/app/app.component.ts file by modifying the component’s template and also include the component theme from the corresponding base package @syncfusion/ej2-slider component through styleUrls.

Adding CSS Reference

Add Slider component’s styles as given below in styles.css.

Copied to clipboard
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
  • Run the application in browser using the following command:
Copied to clipboard
npm start

The below example shows a basic Slider example.

Source
Preview
app.component.ts
app.module.ts
main.ts
template.html
Copied to clipboard
import { Component } from '@angular/core';

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

export class AppComponent {
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div id='container'>
    <div class='wrap'>
        <ejs-slider id='slider' [value]=30></ejs-slider>
    </div>
</div>

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
Copied to clipboard
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];
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<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>

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
Copied to clipboard
import { Component } from '@angular/core';

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

export class AppComponent {
  public orientation="Vertical"
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div id='container'>
    <div class='wrap'>
        <ejs-slider id='slider'  [orientation]= 'orientation' [value]=30></ejs-slider>
    </div>
</div>

Tooltip

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
Copied to clipboard
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' };
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div id='container'>
    <div class='wrap'>
        <ejs-slider id='slider'  [type]= 'type' [tooltip] = 'tooltip' [value]=30></ejs-slider>
    </div>
</div>

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
Copied to clipboard
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];
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div id='container'>
    <div class='wrap'>
        <ejs-slider id='slider'  [type]= 'type' [showButtons]=true [value] = 'value' ></ejs-slider>
    </div>
</div>

See Also

Slider Types

Slider Formatting

Orientation Slider

Ticks in Slider

Tooltip in Slider