How to customize the Slider bar in React Slider

The Slider appearance can be customized through CSS by overriding Slider CSS classes. By default, the Slider uses the e-slider-track class for the bar. You can override this class with custom color values as shown below.

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

index.jsx
index.tsx
index.css
index.html
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.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>

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How to customize the Slider bar in React Slider