• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency

Example of Formatting in ASP.NET MVC Range Slider Control

This sample demonstrates the formatting of Ticks and Tooltip of Slider. Drag the thumb over the bar for selecting the formatted values between min and max.

DEMO
SOURCE

The format feature used to customize the units of Slider values to desired format. The formatted values will also be applied to the ARIA attributes of the slider

In this demo, we have demonstrated Slider with Currency, Kilometer and Time formatting.

  • Currency Slider – In this sample, Ticks and Tooltip are formatted to currency using format API in both tooltip and ticks.
  • Kilometer Slider – In this sample, Ticks and Tooltip are formatted to Kilometer using format API in both tooltip and ticks.
  • Time Slider – In this sample, Ticks and Tooltip are formatted to Time using change event in Tooltip and renderingTicks event in Ticks

For more information, we can refer the Format section from the documentation.