Search results

Ticks

The Ticks in Slider supports you to easily identify the current value/values of the Slider. It contains smallStep and largeStep. The value of the major ticks alone will be displayed in the slider. In order to enable/disable the small ticks, use the showSmallTicks property.

Source
Preview
app.ts
import { Slider } from '@syncfusion/ej2-inputs';

// Initialize Slider component
 let sliderObj: Slider = new Slider({
        tooltip: { placement: 'Before', isVisible: true, showOn: 'Always' },
        value: 30,
        // Slider ticks customization
        ticks: { placement: 'After', largeStep: 20, smallStep: 10, showSmallTicks: true }
    });
    // Render initialized Slider
    sliderObj.appendTo('#slider');

Step

When the Slider is moved, it increases/decreases the value based on the step value. By default, the value is increased/decreased by 1. Use the step property to change the increment step value.

Source
Preview
app.ts
import { Slider } from '@syncfusion/ej2-inputs';

// Initialize Slider component
 let rangeObj: Slider = new Slider({
        ticks: { placement: 'After', largeStep: 20, smallStep: 10, showSmallTicks: true },
        tooltip: { placement: 'Before', isVisible: true, showOn: 'Always' },
        value: 30,
        // Enables step
        step: 10
    });
    // Render initialized Slider
    rangeObj.appendTo('#slider');

Min and Max

Enables the minimum/starting and maximum/ending value of the Slider, by using the min and max property. By default, the minimum value is 1 and maximum value is 100. In the following sample the slider is rendered with the min value as 100 and max value as 1000.

Source
Preview
app.ts
import { Slider } from '@syncfusion/ej2-inputs';

// Initialize Slider component
 let rangeObj: Slider = new Slider({
        ticks: { placement: 'After', largeStep: 200, smallStep: 100, showSmallTicks: true },
        tooltip: { placement: 'Before', isVisible: true, showOn: 'Always' },
        // Minimum value
        min: 100,
        // Maximum value
        max: 1100,
        // Slider current value
        value: 400
    });
    // Render initialized Slider
    rangeObj.appendTo('#slider');
Contents
Contents