Currently, the Kendo UI RangeSlider provides a single-colored track (.k-slider-track
) with a separate style applied only to the selected range. However, in many modern design requirements, there is a need to split the track into multiple colored sections (e.g., 3 or more segments with different colors) to visually represent thresholds, ranges, or categories.
Example Use Cases:
Displaying low, medium, and high ranges with green, yellow, and red colors.
Visualizing different risk or performance levels directly on the slider track.
Providing a better UI experience by mapping ranges to business values.
Requested Feature:
Add native support to configure multiple color segments within the RangeSlider track (either via configuration options or styling hooks). Ideally, developers should be able to specify:
Number of segments.
Color for each segment.
Segment boundaries (percentage or value-based).
Workarounds Tried:
Custom CSS overlays and pseudo-elements can partially simulate the effect, but they are not reliable or fully aligned with the slider’s rendering behavior.
Impact:
This feature would enhance usability and visualization, making the RangeSlider more flexible for dashboards, financial apps, performance monitoring, and other business-critical UI scenarios.
Reference:
Please find an attached image illustrating the requested multicolored track (example with 3 segments: green, yellow, and red).