Customize slider limits in React Range slider component
20 Mar 20235 minutes to read
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'));
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'));