How to customize the Slider thumb in React Slider

03 Sep 20269 minutes to read

The React Slider appearance can be customized using CSS by overriding React Slider CSS classes. By default, the React Slider uses the e-handle class for the React Slider thumb. You can override this class as needed.

.e-control.e-slider .e-handle {
    background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
    background-color: transparent;
    height: 25px;
    width: 25px;
}
#square_slider.e-control.e-slider .e-handle {
    border-radius: 0%;
    background-color: #f9920b;
    border: 0;
}
#circle_slider.e-control.e-slider .e-handle {
    border-radius: 50%;
    background-color: #f9920b;
    border: 0;
}
#oval_slider.e-control.e-slider .e-handle {
    height: 25px;
    width: 8px;
    top: 3px;
    border-radius: 15px;
    background-color: #f9920b;
}

In this example, the React Slider thumb has been customized to square, circle, and oval shapes. Additionally, a custom background image has been applied to one of the sliders.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
import './index.css';
function App() {
  return (<div id='container'>
    <div className="col-lg-12 control-section">
      <div className="slider-content-wrapper">
        <div className="slider_container">
          <div className="labelText slider-userselect">Square</div>
          <SliderComponent id='square_slider' min={0} max={100} value={30} />
        </div>

        <div className="slider_container">
          <div className="labelText slider-userselect">Circle</div>
          <SliderComponent id='circle_slider' min={0} max={100} value={30} />
        </div>

        <div className="slider_container">
          <div className="labelText slider-userselect">Oval</div>
          <SliderComponent id='oval_slider' min={0} max={100} value={30} />
        </div>

        <div className="slider_container">
          <div className="labelText slider-userselect">Custom image</div>
          <SliderComponent id='image_slider' min={0} max={100} value={30} />
        </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, SliderTickRenderedEventArgs, SliderTickEventArgs } from '@syncfusion/ej2-react-inputs';

function App() {

  return (
    <div id='container'>
      <div className="col-lg-12 control-section">
        <div className="slider-content-wrapper">
          <div className="slider_container">
            <div className="labelText slider-userselect">Square</div>
            <SliderComponent id='square_slider' min={0} max={100} value={30} />
          </div>

          <div className="slider_container">
            <div className="labelText slider-userselect">Circle</div>
            <SliderComponent id='circle_slider' min={0} max={100} value={30} />
          </div>

          <div className="slider_container">
            <div className="labelText slider-userselect">Oval</div>
            <SliderComponent id='oval_slider' min={0} max={100} value={30} />
          </div>

          <div className="slider_container">
            <div className="labelText slider-userselect">Custom image</div>
            <SliderComponent id='image_slider' min={0} max={100} value={30} />
          </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 */
}

.labelText {
  text-align: left;
  font-weight: 500;
  padding-bottom: 10px;
}

.slider_container {
  margin-top: 40px;
}

.e-bigger .content-wrapper {
  width: 80%;
}

#square_slider .e-handle {
  border-radius: 0;
  background-color: #f9920b;
  border: 0;
}

#circle_slider .e-handle {
  background-color: #f9920b;
  border-radius: 50%;
  border: 0;
}

#image_slider .e-handle {
  height: 25px;
  width: 24px;
  background-size: 24px;

}

#image_slider .e-handle {
  background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0;
}

#square_slider .e-tab-handle::after,
#circle_slider .e-tab-handle::after {
  background-color: #f9920b;
}

#image_slider .e-tab-handle::after {
  background-color: transparent;
}

#oval_slider .e-handle {
  height: 25px;
  width: 8px;
  top: 3px;
  border-radius: 15px;
  background-color: #f9920b;
}
<!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/35.1.37/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/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>