Interface for a class LimitData
boolean
It is used to enable the limit in the slider.
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>
);
}
} number
It is used to set the maximum end limit value.
number
It is used to set the maximum start limit value.
number
It is used to set the minimum end limit value.
number
It is used to set the minimum start limit value.
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>
);
}
}