Unplanned
Last Updated: 25 Sep 2025 09:10 by ADMIN
Anant
Created on: 19 Sep 2025 06:31
Category: Kendo UI for jQuery
Type: Feature Request
1
Support for Multicolored Track in Kendo RangeSlider

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).

 

Attached Files:
0 comments