Blazor Range Slider - Value Formatting
This sample demonstrates the formatting of Ticks and Tooltip in the Blazor Range Slider component. Drag the thumb over the bar to select the formatted values between Min and Max.
The format feature customizes the units of Range Slider values to the desired format. The formatted values will also be applied to the ARIA attributes of the Range Slider component.
In this demo, the Range Slider with currency and kilometer formatting is demonstrated.
- Currency Slider – In this example, the ticks and tooltip are formatted into currency using the Format property.
-
Kilometer Slider – In this example, the ticks and tooltip are formatted into kilometers using the
Formatproperty. - Time Slider – In this example, 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.