Search results

LimitDataModel API in JavaScript (ES5) Slider API control

Interface for a class LimitData

Properties

enabled

boolean

It is used to enable the limit in the slider.

endHandleFixed

boolean

It is used to lock the second handle.

    <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, endHandleFixed: true },
        // Initialize tooltip with placement and showOn
        tooltip: { isVisible: true, placement: "Before", showOn: "Focus" }
    });
    defaultObj.appendTo("#default");

maxEnd

number

It is used to set the maximum end limit value.

maxStart

number

It is used to set the maximum start limit value.

minEnd

number

It is used to set the minimum end limit value.

minStart

number

It is used to set the minimum start limit value.

startHandleFixed

boolean

It is used to lock the first handle.

    <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, startHandleFixed: true},
        // Initialize tooltip with placement and showOn
        tooltip: { isVisible: true, placement: "Before", showOn: "Focus" }
    });
    defaultObj.appendTo("#default");