Slider

23 Sep 202515 minutes to read

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.

<div id='slider'></div>

<script>
  var sliderObj = new Slider({ value: 10 });
  sliderObj.appendTo('#slider');
</script>

Properties

colorRange ColorRangeDataModel[]

Specifies the color to the slider based on given value.

cssClass string

Specifies the custom classes to be added to the element used to customize the slider.

  <div id="default"></div>
  <style>
  .slider {
      border: 1px solid;
  }
  </style>

  import { Slider } from "@syncfusion/ej2-inputs";
  let defaultObj: Slider = new Slider({
    value: 30,
    cssClass:"slider"
  });
  defaultObj.appendTo("#default");

Defaults to ’’

customValues string[]|number[]

Specifies an array of slider values in number or string type.
The min and max step values are not considered.

Defaults to null

enableAnimation boolean

Enable or Disable the animation for slider movement.

Defaults to true

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

Defaults to true

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled boolean

Enable or Disable the slider.

Defaults to true

limits LimitDataModel

Specified the limit within which the slider to be moved.
Refer the documentation here
to know more about this property.

Defaults to { enabled: false }

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

max number

Gets/Sets the maximum value of the slider.

Defaults to 100

min number

Gets/Sets the minimum value of the slider.

Defaults to 0

orientation SliderOrientation

Specifies whether to render the slider in vertical or horizontal orientation.
Refer the documentation here
to know more about this property.

Defaults to ‘Horizontal’

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

Defaults to false

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

Defaults to false

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

Defaults to 1

ticks TicksDataModel

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.

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

  import { Slider } from "@syncfusion/ej2-inputs";
  let defaultObj: Slider = new Slider({
        // Set the value for slider
      value: 30,
      ticks: { placement: "After", largeStep: 20}
    });
  defaultObj.appendTo("#default");

Defaults to { placement: ‘before’ }

Specifies the visibility, position of the tooltip over the slider element.

Defaults to { placement: ‘Before’, isVisible: false, showOn: ‘Focus’, format: null }

type SliderType

Defines the type of the Slider. The available options are:

default - Allows to a single value in the Slider.
minRange - Allows to select a single value in the Slider. It display’s a shadow from the start to the current value.
range - Allows to select a range of values in the Slider. It displays shadow in-between the selection range.

    <div class="content-wrapper">
        <div class="sliderwrap">
            <label class="labeltext userselect">Default Slider</label>
            <div id="default"></div>
        </div>
        <div class="sliderwrap">
            <label class="labeltext userselect">MinRange Slider</label>
            <div id="minrange"></div>
        </div>
        <div class="sliderwrap">
            <label class="labeltext userselect">Range Slider</label>
            <div id="range"></div>
        </div>
    </div>

    import { Slider } from "@syncfusion/ej2-inputs";
    let defaultObj: Slider = new Slider({
        // Set the value for slider
        value: 30
    });
    defaultObj.appendTo("#default");
    // Initialize Slider component
    let minRangeObj: Slider = new Slider({
        // Set the value for slider
        value: 30,
        // Set the type to render MinRange slider
        type: "MinRange"
    });
    minRangeObj.appendTo("#minrange");
    // Initialize Slider component
    let rangeObj: Slider = new Slider({
        // Set the initial range values for slider
        value: [30, 70],
        // Set the type to render range slider
        type: "Range"
    });
    rangeObj.appendTo("#range");

Defaults to ‘Default’

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

Defaults to null

width number|string

Specifies the width of the Slider.

Defaults to null

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers.
Also it removes the attributes and classes.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

Returns void

reposition

It is used to reposition slider.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	`Function[]`	?

Returns void

Events

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

  <div id="default"></div>
  <p>Change Event: </p>
  <div id = "change"></div>

import { Slider } from "@syncfusion/ej2-inputs";
  
  let defaultObj: Slider = new Slider({
    value: 30,
  change: function(args: SliderChangeEventArgs) {
    document.getElementById("change").innerHTML = JSON.stringify(args);
    }
  });
  defaultObj.appendTo("#default");

changed EmitType<SliderChangeEventArgs>

Fires whenever the Slider value is changed.
In other term, this event will be triggered, while drag the slider thumb completed.

created EmitType<Object>

Triggers when the Slider is successfully created.

renderedTicks EmitType<SliderTickRenderedEventArgs>

Triggers when the ticks are rendered on the Slider.

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

    import { Slider } from "@syncfusion/ej2-inputs";
    let defaultObj: Slider = new Slider({
        min: 0, max: 100,
        value: 30,
        type: "MinRange",
        ticks: { placement: "Both", largeStep: 20, smallStep: 5 },
        // Handler used to customize tick element
        renderedTicks: (args: SliderTickRenderedEventArgs) => {
            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];
            }
        }
    });
    defaultObj.appendTo("#default");

renderingTicks EmitType<SliderTickEventArgs>

Triggers on rendering the ticks element in the Slider,
which is used to customize the ticks labels dynamically.

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

    import { Slider } from "@syncfusion/ej2-inputs";
    let defaultObj: Slider = new Slider({
      min: new Date("2013-06-13").getTime(),
      value: new Date("2013-06-15").getTime(),
      max: new Date("2013-06-21").getTime(),
      // 86400000 milliseconds for a day
      step: 86400000,
      renderingTicks: function (args: SliderTickEventArgs) {
          let totalMiliSeconds = Number(args.value);
          // Convert the current milliseconds to the respective date in desired format
          let custom = { year: "numeric", month: "short", day: "numeric" };
          args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
      },
      ticks: {
          placement: "After",
          // 2 * 86400000 milliseconds for two days
          largeStep: 2 * 86400000
      },
      showButtons: true
      });
      defaultObj.appendTo("#default");

tooltipChange EmitType<SliderTooltipEventArgs>

Triggers when the Sider tooltip value is changed.

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

    import { Slider } from "@syncfusion/ej2-inputs";

    let defaultObj: Slider = new Slider({
    min: new Date("2013-06-13").getTime(),
    value: new Date("2013-06-15").getTime(),
    max: new Date("2013-06-21").getTime(),
    // 86400000 milliseconds for a day
    step: 86400000,
    tooltipChange: function (args: SliderTooltipEventArgs) {
        let totalMiliSeconds = Number(args.text);
        // Convert the current milliseconds to the respective date in desired format
        let custom = { year: "numeric", month: "short", day: "numeric" };
        args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
    },
    tooltip: {
        placement: "Before",
        isVisible: true
    },
    showButtons: true
    });
    defaultObj.appendTo("#default");

Slider

Properties

colorRange ColorRangeDataModel[]

cssClass string

customValues string[]|number[]

enableAnimation boolean

enableHtmlSanitizer boolean

enablePersistence boolean

enableRtl boolean

enabled boolean

limits LimitDataModel

locale string

max number

min number

orientation SliderOrientation

readonly boolean

showButtons boolean

step number

ticks TicksDataModel

tooltip TooltipDataModel

type SliderType

value number|number[]

width number|string

Methods

addEventListener

appendTo

attachUnloadEvent

dataBind

destroy

detachUnloadEvent

getLocalData

getRootElement

handleUnload

refresh

removeEventListener

reposition

Inject

Events

change EmitType<SliderChangeEventArgs>

changed EmitType<SliderChangeEventArgs>

created EmitType<Object>

renderedTicks EmitType<SliderTickRenderedEventArgs>

renderingTicks EmitType<SliderTickEventArgs>

tooltipChange EmitType<SliderTooltipEventArgs>