Search results

Numeric range slider in Angular Range Slider component

15 Oct 2021 / 1 minute to read

The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent the units. The Numeric processing is demonstrated below.

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

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

export class AppComponent {
    public tooltipData01: Object = { isVisible: true, format: '##.## Km' };
    public ticksData01: Object = { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true };

    public tooltipData02: Object = { isVisible: true, format: '##.#00' };
    public ticksData02: Object = { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true };

    public tooltipData03: Object = { isVisible: true, format: '00##' };
    public ticksData03: Object = { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true };

}
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='label'>Slider formatted with unit representation</div>
        <ejs-slider id='slider' [min]=0 [max]=100 [value]=30 [tooltip]="tooltipData01" [ticks]="ticksData01"></ejs-slider>
    </div>

    <div class='wrap'>
        <div class='label'>Slider formatted with three decimal specifiers</div>
        <ejs-slider id='slider1' [min]=0.1 [max]=0.2 [step]=0.01 [value]=0.13 [tooltip]="tooltipData02" [ticks]="ticksData02"></ejs-slider>
    </div>

    <div class='wrap'>
        <div class='label'>Slider formatted with two leading zeros</div>
        <ejs-slider id='slider2' [min]=0 [max]=100 [value]=30 [tooltip]="tooltipData03" [ticks]="ticksData03"></ejs-slider>
    </div>
</div>
Copied to clipboard
.wrap {
  box-sizing: border-box;
  height: 100px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}