The Slider component is available in @syncfusion/ej2-angular-inputs
package. Utilize this package to render the
Slider Component.
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
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
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
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 { }
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 {
}
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.
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;
}
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.
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;
}
The Slider can be displayed, either in horizontal or vertical orientation. By default, the Slider renders in horizontal orientation.
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.
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;
}
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.
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;
}