HelpBot Assistant

How can I help you?

Customize bar in Angular Range Slider component

26 Feb 202611 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;
    }
}
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;
      }
    }
  }
}
@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;
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));