Reversible Range Slider in Angular

10 Jan 20252 minutes to read

You can create a Range Slider rendered with values in reverse order by setting the min property to the maximum value and the max property to the minimum value. An example of how to achieve a reversible Range Slider is shown below

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';

@Component({
  imports: [
    SliderModule
  ],
  standalone: true,
  selector: 'my-app',
  template: `
    <div id='container'>
      <div class='wrap'>
          <ejs-slider id='slider' [type]="type" [orientation]="orientation" [min]= 'min' [max]= 'max' [value]= 'value' [tooltip]='tooltip' [ticks] = 'ticks' ></ejs-slider>
      </div>
    </div>`,
})

export class AppComponent {
  public orientation: string = "Vertical";
  public type: string = "Range";
  // Set maximum value to min property
  public min: number = 100;
  // Set minimum value to max property
  public max: number = 0;
  // Set initial range values to value property
  public value: number[] = [30, 70];
  public ticks: Object = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
  public tooltip: Object = { placement: 'Before', isVisible: true, showOn: 'Always' };
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

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

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Reversible order can be achieved with Horizontal orientation Range Slider by setting enableRtl as true.