Range slider ticks Min 1

[Davy]

Hello,

when we use a range slider that starts with Min="0" and ticks LargeStep="60" SmallStep="30", the ticks are displayed as 0 - 30 - 60 - 90 etc...
However when we start with Min="1", the ticks are displayed as 1 - 31 - 61 - 91 etc... In this case how can we make sure that it is displayed as: 1 - 30 - 60 - 90 etc?

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Davy,

We understand your requirement to display custom tick values starting from Min="1" while ensuring the ticks are shown as 1 - 30 - 60 - 90 instead of incrementing by the default step values. This can be achieved by using the CustomValues property of the Syncfusion Blazor Slider component, which allows you to define your own set of values independent of the minimum and step configuration.

 

Here is a working sample for your scenario:

@using Syncfusion.Blazor.Inputs

 

<SfSlider @bind-Value="@SelectedIndex"

          Min="0"

          Max="3"

          Type="SliderType.MinRange"

          CustomValues="@CustomValues">

    <SliderTicks Placement="Placement.After"

                 LargeStep="1"

                 ShowSmallTicks="false">

    </SliderTicks>

    <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before">

    </SliderTooltip>

</SfSlider>

 

<p>Selected Value: @CustomValues[SelectedIndex]</p>

 

@code {

    private int SelectedIndex = 0;

    private string[] CustomValues = new string[] { "1", "30", "60", "90" };

}

 

In this using the CustomValues array explicitly defines the tick labels, ensuring they appear exactly as 1, 30, 60, 90. The slider binds to the index of the selected value, and the tooltip displays the corresponding custom label. This approach provides precise control over tick rendering and avoids the default step-based increments.

 

For your reference, we've included a runnable sample and a GIF demonstration.

Sample: https://blazorplayground.syncfusion.com/embed/hDVSWVXBpBOzUstx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Gif:

 

Regards,

K N Siddartha.

[Davy]

Thanks for the sample. 

There is only one issue: We also have the property Step="5" and we still want the user to slide per 5, but only showing the ticks as CustomValues as in the sample above. Is this also possible?

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Davy,

 

We have considered this issue " Range Slider is not working with CustomValues & Step properties" as a bug from our end, and the fix for the issue will be included in our upcoming weekly release which is expected to be scheduled at the end of December 2025.

 

You can now track the status of the feedback through the link below,

Feedback - https://www.syncfusion.com/feedback/71668/range-slider-is-not-working-with-customvalues-step-properties 

 

 

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

 

Regards,

K N Siddartha.

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Davy,

 

 

After validating with the source-level Slider component, we would like to confirm that when the CustomValues property is defined, the slider does not calculate ticks using the Min, Max, and Step properties. Instead, it directly uses the values provided in the CustomValues array. This behavior is documented in the API reference, which you can find at the link below.

 

As a result, the slider’s value change action may not behave as expected if you rely on Min/Max/Step. To achieve the desired functionality, we recommend using the TicksRendering event of the Slider component to customize the tick labels and values.

 

<SfSlider @bind-Value="@SelectedIndex" Min="1" Max="100" Step="5" Type="SliderType.MinRange">

    <SliderTicks Placement="Syncfusion.Blazor.Inputs.Placement.After" LargeStep="29.5" ShowSmallTicks="false"></SliderTicks>

    <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before"></SliderTooltip>

    <SliderEvents TValue="int" TicksRendering="OnTickRendering"></SliderEvents>

</SfSlider>

 

@code {

    private int SelectedIndex = 0;

    private void OnTickRendering(SliderTickEventArgs args)

    {

        var d = args;

        if (args.Text == "30.5")

        {

            args.Value = 30;

            args.Text = "30";

        }

        else if (args.Text == "89.5")

        {

            args.Value = 90;

            args.Text = "90";

        }

    }

}

 

For your convenience, we have included a sample with a GIF demonstration:

 

Gif:

 

 

 

 

Sample link: https://blazorplayground.syncfusion.com/embed/hNrSCrCchQETUykq?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Slider API Documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_CustomValues