Ticks

17 Feb 20222 minutes to read

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.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
     @Html.EJS().Slider("default").Value("30").Ticks( new SliderTicksData { Placement = Placement.After, LargeStep = 20, SmallStep = 10, ShowSmallTicks = true }).Tooltip(new SliderTooltipData { IsVisible = true, Placement = TooltipPlacement.Before, ShowOn = TooltipShowOn.Always }).Render()

Ticks.cs

public ActionResult Ticks()
{
    return View();
}

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.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
     @Html.EJS().Slider("default").Value("30").Step(10).Ticks( new SliderTicksData { Placement = Placement.After, LargeStep = 20, SmallStep = 10, ShowSmallTicks = true }).Tooltip(new SliderTooltipData { IsVisible = true, Placement = TooltipPlacement.Before, ShowOn = TooltipShowOn.Always }).Render()

Step.cs

public ActionResult Step()
{
    return View();
}

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.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
     @Html.EJS().Slider("default").Min(100).Max(1100).Value("300").Tooltip(new SliderTooltipData { IsVisible = true, ShowOn = TooltipShowOn.Always, Placement = TooltipPlacement.Before }).Ticks(new SliderTicksData { Placement = Placement.After, LargeStep = 200, SmallStep = 100, ShowSmallTicks = true }).Render()

Min-max.cs

public ActionResult MiniMax()
{
    return View();
}