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
- Set the
Min()option to -10 and theMax()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.
@(Html.Kendo().Slider()
.Name("reversedSlider")
.Min(-10)
.Max(-1)
.LargeStep(1)
.Value(-10)
.Tooltip(x => x.Template("#= Math.abs(value)#"))
)
@addTagHelper *, Kendo.Mvc
<kendo-slider name="reversedSlider"
large-step="1"
max="-1"
min="-10"
value="-10">
<slider-tooltip template="#= Math.abs(value)#"/>
</kendo-slider>
<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:
<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: