React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customize slider limits in React Range Slider component

12 May 2022 / 2 minutes to read

Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized.

Copied to clipboard
.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.jsx
index.html
index.css
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.value = [30, 70];
        this.ticks = { placement: 'Before', largeStep: 20, smallStep: 5, showSmallTicks: true };
        // Initialize tooltip with placement and showOn
        this.tooltip = { isVisible: true, placement: 'Before', showOn: 'Focus' };
        // Set the limit values for the minrange slider
        this.minLimits = { enabled: true, minStart: 10, minEnd: 40 };
        // Set the limit values for the range slider
        this.rangeLimits = { 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'));
Copied to clipboard
<!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.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/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>
Copied to clipboard
.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);
}
Copied to clipboard
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'));
Previous
Next