Limits in React Range Slider component

28 Feb 202516 minutes to read

The Slider limits restrict the Slider thumb between a particular range. This is used if higher or lower value affect the process or product where the Slider is being used.

The following are the six options in the slider’s limits object. Each API in the limits object is optional.

  • enabled: Enables the limits in the Slider.
  • minStart: Sets the minimum limit for the first handle.
  • minEnd: Sets the maximum limit for the first handle.
  • maxStart: Sets the minimum limit for the second handle.
  • maxEnd: Sets the maximum limit for the second handle.
  • startHandleFixed: Locks the first handle.
  • endHandleFixed: Locks the second handle.

Default and MinRange Slider limits

There is only one handle in the Default and MinRange Slider, so minStart, minEnd, and startHandleFixed options can be used.
When the limits are enabled in the Slider, the limited area becomes darkened. This allows you to differentiate between the allowed and restricted areas.
Refer to the following snippet to enable the limits in the Slider.

    ......

    limits: { enabled: true, minStart: 10, minEnd: 40 }

    ......
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let limits = { enabled: true, minStart: 10, minEnd: 40 };
    let tooltip = { isVisible: true };
    let value = 30;
    return (<div id='container'>
        <div className='wrap'>
            <div className="sliderwrap">
                <SliderComponent value={value} type='MinRange' min={0} max={100} limits={limits} tooltip={tooltip} />
            </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 } from '@syncfusion/ej2-react-inputs';

function App() {
    let limits: object = { enabled: true, minStart: 10, minEnd: 40 };
    let tooltip: object = { isVisible: true };
    let value: number = 30;
    return (
        <div id='container'>
            <div className='wrap'>
                <div className="sliderwrap">
                    <SliderComponent value={value} type='MinRange' min={0} max={100} limits={limits}
                        tooltip={tooltip} />
                </div>
            </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
.sliderwrap {
  margin-top: 20px;
}

.wrap {
  box-sizing: border-box;
  height: 160px;
  margin: 100px auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}

.labeltext {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Range Slider</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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

Range Slider limits

In the range slider, both handles can be restricted and locked from the limit’s object. In this example, the first handle is limited to between 10 and 40, and the second handle is limited to between 60 and 90.

    ......

    limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 }

    ......
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let limits = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
    let tooltip = { isVisible: true };
    let value = [30, 70];
    return (<div id='container'>
        <div className='wrap'>
            <div className="sliderwrap">
                <SliderComponent value={value} type='Range' min={0} max={100} limits={limits} tooltip={tooltip} />
            </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 } from '@syncfusion/ej2-react-inputs';

function App() {
    let limits: object = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
    let tooltip: object = { isVisible: true };
    let value: number[] = [30, 70];
    return (
        <div id='container'>
            <div className='wrap'>
                <div className="sliderwrap">
                    <SliderComponent value={value} type='Range' min={0} max={100} limits={limits}
                        tooltip={tooltip} />
                </div>
            </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
.sliderwrap {
  margin-top: 20px;
}

.wrap {
  box-sizing: border-box;
  height: 160px;
  margin: 100px auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}

.labeltext {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Range Slider</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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>

Handle lock

The movement of Slider handles can be locked by enabling the startHandleFixed and endHandleFixed properties in the limits object.
In this example, the movements of both Slider handles have been locked.

    ......

    limits: { enabled: true, startHandleFixed: true, endHandleFixed: true }

    ......
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let limits = { enabled: true, startHandleFixed: true, endHandleFixed: true };
    let tooltip = { isVisible: true };
    let value = [30, 70];
    return (<div id='container'>
        <div className='wrap'>
            <div className="sliderwrap">
                <SliderComponent value={value} type='Range' min={0} max={100} limits={limits} tooltip={tooltip} />
            </div>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import { Slider } from '@syncfusion/ej2-inputs';

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

function App() {
    let limits: object = { enabled: true, startHandleFixed: true, endHandleFixed: true };
    let tooltip: object = { isVisible: true };
    let value: number[] = [30, 70];
    return (
        <div id='container'>
            <div className='wrap'>
                <div className="sliderwrap">
                    <SliderComponent value={value} type='Range' min={0} max={100} limits={limits}
                        tooltip={tooltip} />
                </div>
            </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
.sliderwrap {
  margin-top: 20px;
}

.wrap {
  box-sizing: border-box;
  height: 160px;
  margin: 100px auto;
  padding: 30px 10px;
  width: 460px;
}

.wrap .label {
  text-align: center;
}

.labeltext {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Range Slider</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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>