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.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } 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'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</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="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/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>
</head>
<body>
<div id='element'>
</div>
</body>
</html>
.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;
}
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'));