Customize Slider bar in React Range Slider component

28 Feb 202517 minutes to read

The Slider appearance can be customized through CSS. You can customize the Slider bar by overriding the Slider CSS classes.
The Slider bar can be customized with different themes. By default, the Slider has the class name e-slider-track for the bar. You can override this class with custom color values as shown in 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%);
}
function 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 apply different background colors for specific ranges of Slider values using the change event.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
  let defaultObj = null;
  let sliderTrack = null;
  let sliderHandle = null;
  function changeEvent(args) {
    if (args.value > 0 && args.value <= 25) {
      // Change handle and range bar color to green when
      sliderHandle.style.backgroundColor = "green";
      sliderTrack.style.backgroundColor = "green";
    }
    else if (args.value > 25 && args.value <= 50) {
      // Change handle and range bar color to royal blue
      sliderHandle.style.backgroundColor = "royalblue";
      sliderTrack.style.backgroundColor = "royalblue";
    }
    else if (args.value > 50 && args.value <= 75) {
      // Change handle and range bar color to dark orange
      sliderHandle.style.backgroundColor = "darkorange";
      sliderTrack.style.backgroundColor = "darkorange";
    }
    else if (args.value > 75 && args.value <= 100) {
      // Change handle and range bar color to red
      sliderHandle.style.backgroundColor = "red";
      sliderTrack.style.backgroundColor = "red";
    }
  }
  function created() {
    sliderTrack = defaultObj.element.querySelector(".e-range");
    sliderHandle = defaultObj.element.querySelector(".e-handle");
    sliderHandle.style.backgroundColor = "green";
    sliderTrack.style.backgroundColor = "green";
  }
  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 => {
            defaultObj = slider;
          }} type="MinRange" min={0} max={100} value={30} change={changeEvent.bind(this)} created={created.bind(this)} />
        </div>
      </div>
    </div>
  </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, SliderChangeEventArgs } from '@syncfusion/ej2-react-inputs';

function App() {
  let defaultObj: SliderComponent = null as any;
  let sliderTrack: HTMLElement = null as any;
  let sliderHandle: HTMLElement = null as any;

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

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

  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 => {
                defaultObj = slider as any;
              }}
              type="MinRange"
              min={0}
              max={100}
              value={30}
              change={changeEvent.bind(this) as any}
              created={created.bind(this)}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
.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;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Range Slider</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="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>