Customize slider thumb in React Range slider component

7 Dec 20248 minutes to read

Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the thumb. By default, slider has unique class e-handle for slider thumb. You can override the following class as per your requirement.

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

Here, in the sample, the slider thumb has been customized to square, circle, oval shapes, and background image has also been customized.

index.jsx

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'));

index.tsx

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'));

index.css

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