Customize bar in Angular Range Slider component

26 Feb 202610 minutes to read

Customize the Range Slider bar appearance by overriding CSS classes. By default, the slider bar uses the e-slider-track class. Override this class to apply custom colors, gradients, or themes to the slider bar. The following code snippet demonstrates how to apply a gradient color to the slider bar.

.e-control.e-slider .e-slider-track .e-range {
           background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}

You can also apply background color for a certain range depending upon slider values, using change event.

change(args: SliderChangeEventArgs) => {
    .....
    if (sliderTrack && sliderHandle) {
    let color = 'green';
    if (args.value > 25 && args.value <= 50) {
        color = 'royalblue';
    } else if (args.value > 50 && args.value <= 75) {
        color = 'darkorange';
    } else if (args.value > 75 && args.value <= 100) {
        color = 'red';
    }
    sliderHandle.style.backgroundColor = color;
    sliderTrack.style.backgroundColor = color;
    }
}

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SliderModule, SliderComponent, SliderChangeEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SliderModule],
  standalone: true,
  selector: 'my-app',
  template: `
    <div class="slider_container">
      <div class="slider-labeltext slider_userselect">Height</div>
      <ejs-slider id='height_slider' [value]='value' [min]='min' [max]='max'></ejs-slider>
    </div>
    <div class="slider_container">
      <div class="slider-labeltext slider_userselect">Gradient color</div>
      <ejs-slider id='gradient_slider' [value]='gradient_value' [min]='min' [max]='max' [type]='range'></ejs-slider>
    </div>
    <div class="slider_container">
      <div class="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
      <ejs-slider #dynamicSlider id='dynamic_color_slider' [value]='dynamic_value' [min]='min' [max]='max' [type]='range' (created)='created()' (change)='change($event)'></ejs-slider>
    </div>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('dynamicSlider', { static: false }) dynamicSlider!: SliderComponent;

  public value: number = 30;
  public min: number = 0;
  public max: number = 100;
  public gradient_value: number = 30;
  public range: string = 'MinRange';
  public dynamic_value: number = 30;

  // Handler used for slider created event
  created() {
    setTimeout(() => {
      if (this.dynamicSlider) {
        const sliderTrack = this.dynamicSlider.element.querySelector('.e-range') as HTMLElement;
        const sliderHandle = this.dynamicSlider.element.querySelector('.e-handle') as HTMLElement;
        if (sliderTrack && sliderHandle) {
          sliderHandle.style.backgroundColor = 'green';
          sliderTrack.style.backgroundColor = 'green';
        }
      }
    });
  }

  // Handler used for slider change event
  change(args: SliderChangeEventArgs | any) {
    if (this.dynamicSlider) {
      const sliderTrack = this.dynamicSlider.element.querySelector('.e-range') as HTMLElement;
      const sliderHandle = this.dynamicSlider.element.querySelector('.e-handle') as HTMLElement;
      if (sliderTrack && sliderHandle) {
        let color = 'green';
        if (args.value > 25 && args.value <= 50) {
          color = 'royalblue';
        } else if (args.value > 50 && args.value <= 75) {
          color = 'darkorange';
        } else if (args.value > 75 && args.value <= 100) {
          color = 'red';
        }
        sliderHandle.style.backgroundColor = color;
        sliderTrack.style.backgroundColor = color;
      }
    }
  }
}

styles.css

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

.slider-labeltext {
    text-align: left;
    font-weight: 500;
    font-size: 13px;
    padding-bottom: 10px;
  }
  
  #height_slider .e-handle,
  #gradient_slider .e-handle {
    height: 20px;
    width: 20px;
    margin-left: -10px;
    top: calc(50% - 10px);
  }
  
  .slider_container {
    margin-top: 40px;
    margin: 0 auto;
    max-width: 380px;
  }
  
  #height_slider .e-tab-handle::after {
    background-color: #f9920b;
  }
  
  #height_slider .e-slider-track {
    height: 8px;
    top: calc(50% - 4px);
    border-radius: 0;
  }
  
  #gradient_slider .e-range {
    height: 6px;
    top: calc(50% - 3px);
    border-radius: 5px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZTE0NTFkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTclIiBzdG9wLWNvbG9yPSIjZmRmZjQ3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODZmOWZlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjMjkwMGY4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzQlIiBzdG9wLWNvbG9yPSIjNmUwMGY4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iODMlIiBzdG9wLWNvbG9yPSIjZTMzZGY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UxNDQyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0%, #1e5799),
      color-stop(100%, #7db9e8)
    );
    background: -webkit-linear-gradient(
      left,
      #e1451d 0,
      #fdff47 17%,
      #86f9fe 50%,
      #2900f8 65%,
      #6e00f8 74%,
      #e33df9 83%,
      #e14423 100%
    );
    background: linear-gradient(
      left,
      #e1451d 0,
      #fdff47 17%,
      #86f9fe 50%,
      #2900f8 65%,
      #6e00f8 74%,
      #e33df9 83%,
      #e14423 100%
    );
    background: -moz-linear-gradient(
      left,
      #e1451d 0,
      #fdff47 17%,
      #86f9fe 50%,
      #2900f8 65%,
      #6e00f8 74%,
      #e33df9 83%,
      #e14423 100%
    );
    background: -o-linear-gradient(
      left,
      #e1451d 0,
      #fdff47 17%,
      #86f9fe 50%,
      #2900f8 65%,
      #6e00f8 74%,
      #e33df9 83%,
      #e14423 100%
    );
  }
  
  #gradient_slider .e-slider-track {
    height: 8px;
    top: calc(50% - 4px);
    border-radius: 5px;
  }

main.ts

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