LimitDataModel

17 Sep 20252 minutes to read

Interface for a class LimitData

Properties

enabled boolean

It is used to enable the limit in the slider.

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>
    );
  }
}

maxEnd number

It is used to set the maximum end limit value.

maxStart number

It is used to set the maximum start limit value.

minEnd number

It is used to set the minimum end limit value.

minStart number

It is used to set the minimum start limit value.

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>
    );
  }
}