Overview

12 Sep 20252 minutes to read

| Name | Description |
|——|————-|
| ColorRangeData| It illustrates the color track data in slider.

  <div id="default"></div>

  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>

ts import { Slider } from "@syncfusion/ej2-inputs"; let defaultObj: Slider = new Slider({ 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
of values in-between a min and max range, by dragging the handle over the slider bar.|
| TicksData| Configures the ticks data of the Slider.|
| TooltipData| It illustrates the tooltip data in slider.|
| SliderChangeEventArgs| It is used to denote the Slider Change/Changed Event arguments.|
| SliderTickEventArgs| It is used to denote the TicksRender Event arguments.|
| SliderTickRenderedEventArgs| It is used t denote the ticks rendered Event arguments.|
| SliderTooltipEventArgs| It is used to denote the TooltipChange Event arguments.|
| Placement| Ticks Placement.|
| SliderOrientation| Slider orientation.|
| SliderType| Slider type.|
| TooltipPlacement| Tooltip Placement.|
| TooltipShowOn| Tooltip ShowOn.|