Interface for a class TicksData
string
It is used to customize the Slider scale value to the desired format using Internationalization or events(custom formatting).
import * as React from 'react';
import { SliderComponent, ColorRangeDataModel, TicksDataModel } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
public ticks: TicksDataModel = {
placement: "After",
format: "C2",
largeStep: 20,
smallStep: 10,
showSmallTicks: true
};
public tooltip = { isVisible: true, format: "C2" };
render() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' value={30} tooltip={this.tooltip}
ticks={this.ticks} />
</div>
</div>
);
}
}
number
It is used to denote the distance between two major (large) ticks from the scale of the Slider.
import * as React from 'react';
import { SliderComponent, ColorRangeDataModel } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
public ticks: TicksDataModel = {
placement: "After",
largeStep: 20,
showSmallTicks: true
};
public tooltip = { isVisible: true };
render() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' value={30} tooltip={this.tooltip}
ticks={this.ticks} />
</div>
</div>
);
}
}
It is used to denote the position of the ticks in the Slider. The available options are:
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",
};
render() {
return (
<div id="container">
<div className="wrap">
<SliderComponent id="slider" value={30} ticks={this.ticks} />
</div>
</div>
);
}
}
boolean
We can show or hide the small ticks in the Slider, which will be appeared in between the largeTicks.
number
It is used to denote the distance between two minor (small) ticks from the scale of the Slider.
import * as React from 'react';
import { SliderComponent, ColorRangeDataModel } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
public ticks: TicksDataModel = {
placement: "After",
smallStep: 10,
showSmallTicks: true
};
public tooltip = { isVisible: true};
render() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' value={30} tooltip={this.tooltip}
ticks={this.ticks} />
</div>
</div>
);
}
}