Types in Blazor Range Slider Component

26 Mar 20251 minute to read

The Type of Slider are as follows:

Types Usage
Default Allows to select a single value in the Slider.
MinRange Allows to select a single value in the Slider. Its display’s a shadow from the start to the current value.
Range Allows to select a range of values in the Slider. It displays shadow in-between the selection range.

NOTE

Both the Default Slider and Min-Range Slider have same behavior that is used to select a single value.
In Min-Range Slider, a shadow is considered from the start value to current handle position. But the Range Slider contains two handles that is used to select a range of values and a shadow is considered in between the two handles.

@using Syncfusion.Blazor.Inputs

<label class="labeltext">Default</label>
<SfSlider Value="30"></SfSlider>

<label class="labeltext">MinRange</label>
<SfSlider Value="40" Type="SliderType.MinRange"></SfSlider>

<label class="labeltext">Range</label>
<SfSlider Value=@RangeValue Type="SliderType.Range"></SfSlider>


@code{
    public int[] RangeValue = { 30, 70 };
}

Displaying Different Blazor RangeSliders