React
Demos
Support
Forum
Download
Search results

SliderModel API in React Slider API component

Interface for a class Slider

Properties

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");

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");

customValues

string[] | number[]

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

enableAnimation

boolean

Enables/Disables the animation for slider movement.

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

enablePersistence

boolean

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

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enabled

boolean

Enables or Disables the slider.

limits

LimitDataModel

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

locale

string

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

max

number

Gets/Sets the maximum value of the slider.

min

number

Gets/Sets the minimum value of the slider.

orientation

string

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

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.

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.

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.

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");

tooltip

TooltipDataModel

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

type

string

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");

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.

width

number | string

Specifies the width of the Slider.

Previous
Next