Geek Answers Handbook

Kendo slider background color?

I am using Kendo Slider. My requirement is that for every change in the value of the slider, I need to change the background color of the kendo slider.

+4
source share
1 answer

If you want to change the background of the slider, you can do something like:

$("#slider").kendoSlider({ orientation: "vertical", min: 0, max: 100, smallStep: 1, largeStep: 20, showButtons: true, change: function (e) { var top = $("#slider").closest(".k-slider-wrap"); if (e.value < 33) { $(".k-slider-track", top).css("background-color", "#ff0000"); $(".k-slider-selection", top).css("background-color", "#ff0000"); } else if (e.value < 66) { $(".k-slider-track", top).css("background-color", "#00ff00"); $(".k-slider-selection", top).css("background-color", "#00ff00"); } else { $(".k-slider-track", top).css("background-color", "#0000ff"); $(".k-slider-selection", top).css("background-color", "#0000ff"); } } });

What I did was define a slider with values ​​between 0 and 100 and define a change handler to read the current value (like e.value ) and determine the background of the slide depending on the value.

The following is important:

  • k-slider-selection is the CSS class for the selected part of the slide.
  • k-slider-track is the CSS class of a full slide.

Ex: if the value is 33, then the slider for 0-33 is k-slider-selection , and the full range (0-100) is k-slider-track

+3
source

More articles:


All Articles