Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized.
.e-slider-container.e-horizontal .e-limits {
background-color: rgba(69, 100, 233, 0.46);
}
Here, the limit bar is customized with different background color. By default, the slider has class e-limits
for limits bar.
You can override the class with our own color values as given in the following code snippet.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let defaultObj;
let value = [30, 70];
let ticks = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
// Initialize tooltip with placement and showOn
let tooltip = { isVisible: true, placement: 'Before', showOn: 'Focus' };
// Set the limit values for the minrange slider
let minLimits = { enabled: true, minStart: 10, minEnd: 40 };
// Set the limit values for the range slider
let rangeLimits = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
return (<div id='container'>
<div className="content-wrapper">
<div className='sliderwrap'>
<label className="userselect">MinRange Slider With Limits</label>
<SliderComponent id='minrange' type='MinRange' min={0} max={100} value={30} ticks={ticks} tooltip={tooltip} limits={minLimits}/>
</div>
<div className='sliderwrap'>
<label className="userselect">Range Slider With Limits</label>
<SliderComponent id='range' type='Range' min={0} max={100} value={value} ticks={ticks} tooltip={tooltip} limits={rangeLimits}/>
</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.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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>
.content-wrapper {
width: 52%;
margin: 0 auto;
min-width: 185px;
}
.sliderwrap {
margin-top: 45px;
}
.e-bigger .content-wrapper {
width: 80%;
}
.sliderwrap label {
padding-bottom: 50px;
font-size: 13px;
font-weight: 500;
margin-top: 15px;
display: block;
}
.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 */
}
.property-custom td {
padding: 5px;
}
#range .e-limits, #minrange .e-limits {
background-color: #ccc;
background-color: rgba(69, 100, 233, 0.46);
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, SliderChangeEventArgs } from '@syncfusion/ej2-react-inputs';
function App() {
let defaultObj: SliderComponent;
let value: number[] = [30, 70];
let ticks: object = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
// Initialize tooltip with placement and showOn
let tooltip: object = { isVisible: true, placement: 'Before', showOn: 'Focus' };
// Set the limit values for the minrange slider
let minLimits: object = { enabled: true, minStart: 10, minEnd: 40 };
// Set the limit values for the range slider
let rangeLimits: object = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
return (
<div id='container'>
<div className="content-wrapper">
<div className='sliderwrap'>
<label className="userselect">MinRange Slider With Limits</label>
<SliderComponent id='minrange'
type='MinRange'
min={0} max={100} value={30} ticks={ticks} tooltip={tooltip} limits={minLimits} />
</div>
<div className='sliderwrap'>
<label className="userselect">Range Slider With Limits</label>
<SliderComponent id='range' type='Range'
min={0} max={100} value={value} ticks={ticks} tooltip={tooltip} limits={rangeLimits} />
</div>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));