Customize slider bar in React Range Slider component

18 May 2022 / 3 minutes to read

Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the slider bar. The slider bar can be customized with different themes. By default, slider have class name e-slider-track for bar. The class can be overridden with our own color values like the following code snippet.

.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%);
}

private change(args: SliderChangeEventArgs) {
  if (args.value > 0 && args.value <= 25) {
      // Change handle and range bar color to green when
      (sliderHandle as HTMLElement).style.backgroundColor = 'green';
      (sliderTrack as HTMLElement).style.backgroundColor = 'green';
  } else if (args.value > 25 && args.value <= 50) {
      // Change handle and range bar color to royal blue
      (sliderHandle as HTMLElement).style.backgroundColor = 'royalblue';
      (sliderTrack as HTMLElement).style.backgroundColor = 'royalblue';
  } else if (args.value > 50 && args.value <= 75) {
      // Change handle and range bar color to dark orange
      (sliderHandle as HTMLElement).style.backgroundColor = 'darkorange';
      (sliderTrack as HTMLElement).style.backgroundColor = 'darkorange';
  } else if (args.value > 75 && args.value <= 100) {
      // Change handle and range bar color to red
      (sliderHandle as HTMLElement).style.backgroundColor = 'red';
      (sliderTrack as HTMLElement).style.backgroundColor = 'red';
  }
}

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

Source

Preview

index.jsx

index.html

index.css

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.defaultObj = null;
        this.sliderTrack = null;
        this.sliderHandle = null;
    }
    changeEvent(args) {
        if (args.value > 0 && args.value <= 25) {
            // Change handle and range bar color to green when
            this.sliderHandle.style.backgroundColor = "green";
            this.sliderTrack.style.backgroundColor = "green";
        }
        else if (args.value > 25 && args.value <= 50) {
            // Change handle and range bar color to royal blue
            this.sliderHandle.style.backgroundColor = "royalblue";
            this.sliderTrack.style.backgroundColor = "royalblue";
        }
        else if (args.value > 50 && args.value <= 75) {
            // Change handle and range bar color to dark orange
            this.sliderHandle.style.backgroundColor = "darkorange";
            this.sliderTrack.style.backgroundColor = "darkorange";
        }
        else if (args.value > 75 && args.value <= 100) {
            // Change handle and range bar color to red
            this.sliderHandle.style.backgroundColor = "red";
            this.sliderTrack.style.backgroundColor = "red";
        }
    }
    created() {
        this.sliderTrack = this.defaultObj.element.querySelector(".e-range");
        this.sliderHandle = this.defaultObj.element.querySelector(".e-handle");
        this.sliderHandle.style.backgroundColor = "green";
        this.sliderTrack.style.backgroundColor = "green";
    }
    render() {
        return (<div id="container">
        <div className="col-lg-12 control-section">
          <div className="slider-content-wrapper">
            <div className="slider_container">
              <div className="slider-labeltext slider_userselect">Height</div>
              <SliderComponent id="height_slider" min={0} max={100} value={30}/>
            </div>

            <div className="slider_container">
              <div className="slider-labeltext slider_userselect">Gradient color</div>
              <SliderComponent id="gradient_slider" type="MinRange" min={0} max={100} value={30}/>
            </div>

            <div className="slider_container">
              <div className="slider-labeltext slider_userselect">
                Dynamic thumb and selection bar color
              </div>
              <SliderComponent id="dynamic_color_slider" ref={slider => {
            this.defaultObj = slider;
        }} type="MinRange" min={0} max={100} value={30} change={this.changeEvent.bind(this)} created={this.created.bind(this)}/>
            </div>
          </div>
        </div>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

.slider-content-wrapper {
  width: 40%;
  margin: 0 auto;
  min-width: 185px;
}

.slider-userselect {
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
}

.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;
}

#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: -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%);
}


#gradient_slider .e-slider-track {
  height: 8px;
  top: calc(50% - 4px);
  border-radius: 5px;
}

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, SliderChangeEventArgs } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {
  private defaultObj: SliderComponent = null as any;
  private sliderTrack: HTMLElement = null as any;
  private sliderHandle: HTMLElement = null as any;

  private changeEvent(args: SliderChangeEventArgs): void {
    if (args.value > 0 && args.value <= 25) {
      // Change handle and range bar color to green when
      this.sliderHandle.style.backgroundColor = "green";
      this.sliderTrack.style.backgroundColor = "green";
    } else if (args.value > 25 && args.value <= 50) {
      // Change handle and range bar color to royal blue
      this.sliderHandle.style.backgroundColor = "royalblue";
      this.sliderTrack.style.backgroundColor = "royalblue";
    } else if (args.value > 50 && args.value <= 75) {
      // Change handle and range bar color to dark orange
      this.sliderHandle.style.backgroundColor = "darkorange";
      this.sliderTrack.style.backgroundColor = "darkorange";
    } else if (args.value > 75 && args.value <= 100) {
      // Change handle and range bar color to red
      this.sliderHandle.style.backgroundColor = "red";
      this.sliderTrack.style.backgroundColor = "red";
    }
  }

  private created(): void {
    this.sliderTrack = this.defaultObj.element.querySelector(".e-range") as any;
    this.sliderHandle = this.defaultObj.element.querySelector(".e-handle") as any;
    this.sliderHandle.style.backgroundColor = "green";
    this.sliderTrack.style.backgroundColor = "green";
  }

  render() {
    return (
      <div id="container">
        <div className="col-lg-12 control-section">
          <div className="slider-content-wrapper">
            <div className="slider_container">
              <div className="slider-labeltext slider_userselect">Height</div>
              <SliderComponent id="height_slider" min={0} max={100} value={30} />
            </div>

            <div className="slider_container">
              <div className="slider-labeltext slider_userselect">Gradient color</div>
              <SliderComponent id="gradient_slider" type="MinRange" min={0} max={100} value={30} />
            </div>

            <div className="slider_container">
              <div className="slider-labeltext slider_userselect">
                Dynamic thumb and selection bar color
              </div>
              <SliderComponent
                id="dynamic_color_slider"
                ref={slider => {
                  this.defaultObj = slider as any;
                }}
                type="MinRange"
                min={0}
                max={100}
                value={30}
                change={this.changeEvent.bind(this) as any}
                created={this.created.bind(this)}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('element'));

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!