Limits in React Range Slider component

21 Feb 202616 minutes to read

Slider limits restrict the thumb movement within a specific range. This is useful when higher or lower values could affect the process or product using the Slider.

The following are the options available in the Slider’s limits object. Each option 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

The Default and MinRange Slider has a single handle, so you can use minStart, minEnd, and startHandleFixed options.
When limits are enabled, the restricted area appears darkened, allowing you to clearly distinguish between allowed and restricted ranges.
The following snippet shows how to enable limits in the Slider.

    ......

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

    ......

index.jsx
index.tsx
index.css
index.html
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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.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 using the limits object. The following example limits the first handle between 10 and 40, and the second handle between 60 and 90.

    ......

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

    ......

index.jsx
index.tsx
index.css
index.html
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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.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

Lock Slider handle movement by enabling the startHandleFixed and endHandleFixed properties in the limits object.
The following example locks both Slider handles in place.

    ......

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

    ......

index.jsx
index.tsx
index.css
index.html
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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.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>

Search docs

Ask HelpBot