HelpBot Assistant

How can I help you?

Customize Slider thumb in React Range Slider component

21 Feb 20269 minutes to read

The Slider appearance can be customized using CSS by overriding Slider CSS classes. By default, the Slider uses the e-handle class for the 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 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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>