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.

razor
ticks.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    @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()
}
public ActionResult Ticks()
{
    return View();
}

ASP .NET Core - Slider - Ticks

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.

razor
step.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    @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()
}
public ActionResult Step()
{
    return View();
}

ASP .NET Core - Slider - Step

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.

razor
min-max.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
@section ControlsSection{
    @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()
}
public ActionResult MiniMax()
{
    return View();
}

ASP .NET Core - Slider - Min and Max

Contents
Contents