Customize slider limits in React Range Slider component

30 Jul 2021 / 2 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.

Source

Preview

index.tsx

index.html

index.css

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, SliderChangeEventArgs } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {

  private defaultObj: SliderComponent;
  private value: number[] = [30, 70];

  private ticks: object = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
  // Initialize tooltip with placement and showOn
  private tooltip: object = { isVisible: true, placement: 'Before', showOn: 'Focus' };

  // Set the limit values for the minrange slider
  private minLimits: object = { enabled: true, minStart: 10, minEnd: 40 };
  // Set the limit values for the range slider
  private rangeLimits: object = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };

  render() {
    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={this.ticks} tooltip={this.tooltip} limits={this.minLimits} />
        </div>

        <div className='sliderwrap'>
            <label className="userselect">Range Slider With Limits</label>
            <SliderComponent id='range' type='Range'
                min={0} max={100} value={this.value} ticks={this.ticks} tooltip={this.tooltip} limits={this.rangeLimits} />
        </div>
      </div>
    </div>
    );
  }
}

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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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);
}