Range Slider / Formatting

Blazor Range Slider - Value Formatting

Loading Syncfusion Blazor Server Demos…

This sample demonstrates the formatting of Ticks and Tooltip in the Blazor Range Slider component. Drag the thumb over the bar to select formatted values between Min and Max.

The format feature customizes the units of Range Slider values to the desired format. The formatted values are also applied to the ARIA attributes of the Range Slider component.

Formatting Examples:

  • Currency Slider - The ticks and tooltip are formatted into currency using the Format property.
  • Kilometer Slider - The ticks and tooltip are formatted into kilometers using the Format property.
  • Time Slider - The ticks and tooltip are formatted into time using the OnTooltipChange event in the tooltip and the TicksRendering event in ticks.

For more information, refer to the format section of the documentation.

Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE