Search results

Formatting

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. There are two ways of achieving formatting in slider.

  • Use the Format API of slider which utilizes our Internationalization to format values.
@using Syncfusion.EJ2.Blazor.Inputs
<EjsSlider Value="30">
    <SliderTooltipData IsVisible="true" ShowOn="TooltipShowOn.Always" Format="C2" Placement="TooltipPlacement.Before"></SliderTooltipData>
    <SliderTicksData Placement="Placement.Before" Format="C2" ShowSmallTicks="true" LargeStep="20" SmallStep="10"></SliderTicksData>
</EjsSlider>

Blazor - Slider - Format

Using format API

In this method, we have different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and # specifiers. In this below example we have formatted the ticks and tooltip values into percentage.

@using Syncfusion.EJ2.Blazor.Inputs
<EjsSlider Min="1" Max="10" Value="3">
    <SliderTicksData Placement="Placement.After" Format="P0" ShowSmallTicks="true" LargeStep="2" SmallStep="1"></SliderTicksData>
    <SliderTooltipData IsVisible="true" ShowOn="TooltipShowOn.Always" Format="P0" Placement="TooltipPlacement.Before"></SliderTooltipData>
</EjsSlider>

Blazor - Slider - Format API