Search results

Getting Started with Angular CLI

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 inputs package

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

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

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

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
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>

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
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>

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
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>

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
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>

See Also

Slider Types

Slider Formatting

Orientation Slider

Ticks in Slider

Tooltip in Slider