Interface for a class Slider
EmitType<SliderChangeEventArgs>
We can trigger change event whenever Slider value is changed. In other term, this event will be triggered while drag the slider thumb.
import * as React from "react";
import { SliderComponent, SliderChangeEventArgs } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component<{}, {}> {
private defaultObj: SliderComponent = null as any;
private sliderTrack: HTMLElement = null as any;
private sliderHandle: HTMLElement = null as any;
private changeEvent(args: SliderChangeEventArgs): void {
if (args.value > 0 && args.value <= 25) {
// Change handle and range bar color to green when
this.sliderHandle.style.backgroundColor = "green";
this.sliderTrack.style.backgroundColor = "green";
} else if (args.value > 25 && args.value <= 50) {
// Change handle and range bar color to royal blue
this.sliderHandle.style.backgroundColor = "royalblue";
this.sliderTrack.style.backgroundColor = "royalblue";
} else if (args.value > 50 && args.value <= 75) {
// Change handle and range bar color to dark orange
this.sliderHandle.style.backgroundColor = "darkorange";
this.sliderTrack.style.backgroundColor = "darkorange";
} else if (args.value > 75 && args.value <= 100) {
// Change handle and range bar color to red
this.sliderHandle.style.backgroundColor = "red";
this.sliderTrack.style.backgroundColor = "red";
}
}
private created(): void {
this.sliderTrack = this.defaultObj.element.querySelector(".e-range") as any;
this.sliderHandle = this.defaultObj.element.querySelector(".e-handle") as any;
this.sliderHandle.style.backgroundColor = "green";
this.sliderTrack.style.backgroundColor = "green";
}
render() {
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="dynamic_color_slider"
ref={slider => {
this.defaultObj = slider as any;
}}
type="MinRange"
min={0}
max={100}
value={30}
change={this.changeEvent.bind(this) as any}
created={this.created.bind(this)}
/>
</div>
</div>
);
}
}
EmitType<SliderChangeEventArgs>
Fires whenever the Slider value is changed. In other term, this event will be triggered, while drag the slider thumb completed.
EmitType<Object>
Triggers when the Slider is successfully created.
EmitType<SliderTickRenderedEventArgs>
Triggers when the ticks are rendered on the Slider.
import * as React from "react";
import { SliderComponent, TooltipDataModel,SliderTickRenderedEventArgs,TicksDataModel } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component<{}, {}> {
private custom: TicksDataModel = { placement: "Both", largeStep: 20, smallStep: 5 };
private value: number[] = [30, 70];
private customTicks(args: SliderTickRenderedEventArgs): void {
let li: any = args.ticksWrapper.getElementsByClassName("e-large");
let remarks: any = ["Very Poor", "Poor", "Average", "Good", "Very Good", "Excellent"];
for (let i: number = 0; i < li.length; ++i) {
(li[i].querySelectorAll(".e-tick-both")[1] as HTMLElement).innerText = remarks[i];
}
}
render() {
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="slider"
type="MinRange"
min={0}
max={100}
value={this.value}
ticks={this.custom}
renderedTicks={this.customTicks.bind(this) as any}
/>
</div>
</div>
);
}
}
Triggers on rendering the ticks element in the Slider, which is used to customize the ticks labels dynamically.
import * as React from "react";
import { SliderComponent, TooltipDataModel, SliderTickEventArgs,TicksDataModel } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component<{}, {}> {
public min = new Date("2013-06-13").getTime();
public max = new Date("2013-06-21").getTime();
public step = 86400000;
public value = new Date("2013-06-15").getTime();
public ticks: TicksDataModel = { placement: "After", largeStep: 2 * 86400000 };
renderingTicksHandler(args: SliderTickEventArgs) {
let totalMiliSeconds = Number(args.value);
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
render() {
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="slider"
min={this.min}
max={this.max}
value={this.value}
step={this.step}
ticks={this.ticks}
showButtons={true}
renderingTicks={this.renderingTicksHandler.bind(this) as any}
/>
</div>
</div>
);
}
}
EmitType<SliderTooltipEventArgs>
Triggers when the Sider tooltip value is changed.
import * as React from "react";
import { SliderComponent, TooltipDataModel,SliderTooltipEventArgs,TicksDataModel } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component<{}, {}> {
public min = new Date("2013-06-13").getTime();
public max = new Date("2013-06-21").getTime();
public step = 86400000;
public value = new Date("2013-06-15").getTime();
public tooltip: TooltipDataModel = { placement: "Before", isVisible: true };
tooltipChangeHandler(args: SliderTooltipEventArgs) {
let totalMiliSeconds = Number(args.text);
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
render() {
return (
<div id="container">
<div className="wrap">
<SliderComponent
id="slider"
min={this.min}
max={this.max}
value={this.value}
step={this.step}
tooltip={this.tooltip}
showButtons={true}
tooltipChange={this.tooltipChangeHandler.bind(this) as any}
/>
</div>
</div>
);
}
}
Specifies the color to the slider based on given value.
string
Specifies the custom classes to be added to the element used to customize the slider.
<style>
.sliderCss {
border: 1px solid;
}
</style>
import * as React from 'react';
import { SliderComponent, ColorRangeDataModel } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
public colorRange: ColorRangeDataModel[] = [{color:"#898b2b", start:10, end:45}];
render() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' value={30} cssClass={sliderCss} />
</div>
</div>
);
}
}
string[]
| number[]
Specifies an array of slider values in number or string type. The min and max step values are not considered.
boolean
Enable or Disable the animation for slider movement.
boolean
Specifies whether to display or remove the untrusted HTML values in the Slider component. If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
boolean
Enable or Disable the slider.
Specified the limit within which the slider to be moved. Refer the documentation here to know more about this property.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
number
Gets/Sets the maximum value of the slider.
number
Gets/Sets the minimum value of the slider.
Specifies whether to render the slider in vertical or horizontal orientation. Refer the documentation here to know more about this property.
boolean
Specifies whether the render the slider in read-only mode to restrict any user interaction. The slider rendered with user defined values and can’t be interacted with user actions.
boolean
Specifies whether to show or hide the increase/decrease buttons of Slider to change the slider value. Refer the documentation here to know more about this property.
number
Specifies the step value for each value change when the increase / decrease button is clicked or on arrow keys press or on dragging the thumb. Refer the documentation here to know more about this property.
It is used to render the slider ticks options such as placement and step values. Refer the documentation here to know more about this property with demo.
import * as React from 'react';
import { SliderComponent, ColorRangeDataModel } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component<{}, {}> {
public colorRange: ColorRangeDataModel[] = [{color:"#898b2b", start:10, end:45}];
render() {
return (
<div id='container'>
<div className='wrap'>
<SliderComponent id='slider' value={30} colorRange={this.colorRange} />
</div>
</div>
);
}
}
Specifies the visibility, position of the tooltip over the slider element.
Defines the type of the Slider. The available options are:
import * as React from "react";
import { SliderComponent, ColorRangeDataModel, TooltipDataModel } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component<{}, {}> {
public tooltip: TooltipDataModel = { placement: "After",
isVisible: true,
showOn: "Focus"};
render() {
return (
<div id="container">
<div className="wrap">
<div className="sliderwrap">
<div className="labeltext">Default</div>
<SliderComponent id="default" value={30}/>
</div>
<div className="sliderwrap">
<div className="labeltext">MinRange</div>
<SliderComponent id="minrange" type="MinRange" value={30} />
</div>
<div className="sliderwrap">
<div className="labeltext">Range</div>
<SliderComponent id="range" type="Range" value={[30, 70]} />
</div>
</div>
</div>
);
}
}
number
| number[]
It is used to denote the current value of the Slider. The value should be specified in array of number when render Slider type as range.
number
| string
Specifies the width of the Slider.