import { Slider } from "@syncfusion/ej2-inputs";
let defaultObj: Slider = new Slider({
value: 30,
colorRange:[{color:"green", start:10, end: 45}]
});
defaultObj.appendTo("#default");
```|
| [LimitData](./limitData/)| It illustrates the limit data in slider.<br>
```html
<div id="default"></div>
import { Slider } from "@syncfusion/ej2-inputs";
let defaultObj: Slider = new Slider({
min: 0, max: 100,
value: [25, 75],
step: 1,
type: "Range",
ticks: { placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true },
limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 },
tooltip: { isVisible: true, placement: "Before", showOn: "Focus" }
});
defaultObj.appendTo("#default");
```|
| [Slider](./)| The Slider component allows the user to select a value or range<br>of values in-between a min and max range, by dragging the handle over the slider bar.|
| [TicksData](./ticksData/)| Configures the ticks data of the Slider.|
| [TooltipData](./tooltipData/)| It illustrates the tooltip data in slider.|
| [SliderChangeEventArgs](./sliderChangeEventArgs/)| It is used to denote the Slider Change/Changed Event arguments.|
| [SliderTickEventArgs](./sliderTickEventArgs/)| It is used to denote the TicksRender Event arguments.|
| [SliderTickRenderedEventArgs](./sliderTickRenderedEventArgs/)| It is used t denote the ticks rendered Event arguments.|
| [SliderTooltipEventArgs](./sliderTooltipEventArgs/)| It is used to denote the TooltipChange Event arguments.|
| [Placement](./placement/)| Ticks Placement.|
| [SliderOrientation](./sliderOrientation/)| Slider orientation.|
| [SliderType](./sliderType/)| Slider type.|
| [TooltipPlacement](./tooltipPlacement/)| Tooltip Placement.|
| [TooltipShowOn](./tooltipShowOn/)| Tooltip ShowOn.|