New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Reversing the Slider Labels to be Displayed from Maximum to Minimum

Environment

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

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

Set the Min() option to -10 and the Max() value to -1.
Set the initial value to -10.
Update the default Tooltip template to show the absolute value (for example, 10 instead of -10).
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)#"))
    )
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 REPL example on displaying the Slider scale from maximum to minimum.

Reversing the Slider Labels to be Displayed from Maximum to Minimum

Environment

Description

Solution

More ASP.NET MVC Slider Resources

See Also