Reversing the Slider Labels to be Displayed from Maximum to Minimum

Environment

Product	Telerik UI for ASP.NET Core Slider
Product Version	2024.4.1112

Description

By design, the Slider values are positioned from the minimum value to the maximum value (left to right). How can I reverse the minimum and maximum values of the Slider so the maximum value is displayed on the left and the minimum on the right?

Solution

1. Set the Min() option to -10 and the Max() value to -1.
2. Set the initial value to -10.
3. Update the default Tooltip template to show the absolute value (for example, 10 instead of -10).
4. Update the Slider labels to show the absolute values when the page with the Slider is loaded.

Razor

    @(Html.Kendo().Slider()
        .Name("reversedSlider")
        .Min(-10)
        .Max(-1)
        .LargeStep(1)
        .Value(-10)
        .Tooltip(x => x.Template("#= Math.abs(value)#"))
    )

Razor

    @addTagHelper *, Kendo.Mvc

    <kendo-slider name="reversedSlider"
        large-step="1"
        max="-1"
        min="-10"
        value="-10">
        <slider-tooltip template="#= Math.abs(value)#"/>
    </kendo-slider>

Html

    <script>
        $(document).ready(function(){
            var list = $('.k-slider ul.k-slider-items');
            var listItems = list.children('li'); // Select the Slider label element.
            $.each(listItems, function(){ // Loop through them.
                let title = parseInt($(this).attr("title")); // Get the respective value.
                let updatedTitle = Math.abs(title); // Get its absolute value.
                $(this).attr("title", updatedTitle); // Update the "title" attribute.
                $(this).find(".k-label").text(updatedTitle); // Update the label text.
            });
        });
    </script>

When you need to get the Slider's value, use its absolute value:

Html

    <script>
        var slider = $("#reversedSlider").data("kendoSlider");
        var sliderValue = Math.abs(slider.value());
    </script>

For a runnable example based on the code above, refer to the following REPL samples:

• Sample code with the Slider HtmlHelper
• Sample code with the Slider TagHelper

More ASP.NET Core Slider Resources

• ASP.NET Core Slider Documentation

• ASP.NET Core Slider Demos

• ASP.NET Core Slider Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Slider for ASP.NET Core

• Server-Side API Reference of the Slider for ASP.NET Core

• Server-Side TagHelper API Reference of the Slider for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base