import{ Slider }from"@syncfusion/ej2-inputs";let defaultObj: Slider =newSlider({
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 =newSlider({
min:0, max:100,// Set the intial range values for slider
value:[25,75],// Set the step value
step:1,// Set the type to render range slider
type:"Range",// Initialize ticks with placement, largestep, smallstep
ticks:{ placement:"Before", largeStep:20, smallStep:5, showSmallTicks:true},// Set the limit values for the slider
limits:{ enabled:true, minStart:10, minEnd:40, maxStart:60, maxEnd:90},// Initialize tooltip with placement and showOn
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.|