Search results

Overview API in JavaScript Slider API control

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>
    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<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.|