How to programmatically create different colors on the jquery or kendo rangeslider slider track?

Question

I have a range slider to specify a date range (slider values are mapped to sequential dates). I would like to programmatically define different colors for different dates on the slider track.

For example the default color of the slider track can be blue, for dates between a and b I'd like the slider track to show red. The slider selection between the two selection points should work normally and overlay anything on the slider track.

Answer 1

You can find the ticks based on their title attribute:

$("#slider")
   .closest(".k-slider")
   .find(".k-tick[title=5]") // find the tick 
   .css("color", "green");

Here is a live demo: http://jsbin.com/AJOwAxA/1/edit