LimitData

17 Sep 20253 minutes to read

It illustrates the limit data in slider.

import * as React from 'react';
import { SliderComponent, ColorRangeDataModel, TicksDataModel, LimitDataModel } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {
  public ticks: TicksDataModel = {
    placement: "After",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  public minRangeLimits: LimitDataModel = { enabled: true, minStart: 10, minEnd: 40, maxStart: 50, maxEnd: 80 };
  render() {
    
    return (
        <div id='container'>
            <div className='wrap'>
                <SliderComponent type='Range' id='slider' value={[30,70]}
            ticks={this.ticks} limits ={this.minRangeLimits}/>
            </div>
        </div>
    );
  }
}

Properties

enabled boolean

It is used to enable the limit in the slider.

Defaults to false

endHandleFixed boolean

It is used to lock the second handle.

import * as React from 'react';
import { SliderComponent, ColorRangeDataModel, TicksDataModel, LimitDataModel } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {
  public ticks: TicksDataModel = {
    placement: "After",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  public minRangeLimits: LimitDataModel = { enabled: true, minStart: 10, minEnd: 40, maxStart: 50, maxEnd: 80, endHandleFixed: true };
  render() {
    
    return (
        <div id='container'>
            <div className='wrap'>
                <SliderComponent type='Range' id='slider' value={[30,70]}
            ticks={this.ticks} limits ={this.minRangeLimits}/>
            </div>
        </div>
    );
  }
}

Defaults to false

maxEnd number

It is used to set the maximum end limit value.

Defaults to null

maxStart number

It is used to set the maximum start limit value.

Defaults to null

minEnd number

It is used to set the minimum end limit value.

Defaults to null

minStart number

It is used to set the minimum start limit value.

Defaults to null

startHandleFixed boolean

It is used to lock the first handle.

import * as React from 'react';
import { SliderComponent, ColorRangeDataModel, TicksDataModel, LimitDataModel } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {
  public ticks: TicksDataModel = {
    placement: "After",
    largeStep: 20,
    smallStep: 10,
    showSmallTicks: true
  };
  public minRangeLimits: LimitDataModel = { enabled: true, minStart: 10, minEnd: 40, startHandleFixed: true };
  render() {
    
    return (
        <div id='container'>
            <div className='wrap'>
                <SliderComponent type='Range' id='slider' value={[30,70]} tooltip={this.tooltip}
            ticks={this.ticks} limits ={this.minRangeLimits}/>
            </div>
        </div>
    );
  }
}

Defaults to false