Blazor Range Slider - Tick Marks

Range Slider / Ticks

This sample demonstrates the rendering of the Blazor Range Slider component with Ticks placement. Drag the thumb over the bar to select the values between Min and Max.

Loading Syncfusion Blazor Server Demos…

The ticks are the visual representation of the Range Slider values. The ticks are differentiated as small and large ticks based on its size. The ticks position can be defined by the SmallStep and LargeStep properties.

In this demo, ticks position with default and Range Slider is demonstrated.

  • Default Slider – In this sample, the small and large ticks are rendered with a frequency of 0.05 and 0.20.
  • Range Slider – In this sample, the small and large ticks are rendered with a frequency of 5 and 20.

The following properties are used to restrict the value range for the Range Slider:

  • Step - Defines an incremental or decremental step value for the Range Slider.
  • Min - Specifies the minimum value of the Range Slider.
  • Max - Specifies the maximum value of the Range Slider.
Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE