Last Updated: 15 Jun 2021 19:05 by ADMIN
Created on: 15 Jun 2021 14:34
Category: Slider
Type: Feature Request
Multiple Sliders in a single instance

I have a situation where I need to be able to let the user divide a value by multiple points, and I'd like to be able to implement it as a multi-slider control. Here's a real world situation:

A company has 3 products they sell, and wants to model each different product financially. I want them to be able to drag the sliders representing each product's total portion of revenue for the company, so that the ratios always add up to 100%.

An example of this is at the bottom of the page here:

Any chance this could be possible? Thanks!

1 comment
Marin Bratanov
Posted on: 15 Jun 2021 19:05

Hello Robert,

We have the range slider to select a bottom and upper limits: You can use CSS to color the section between them that showcases the "active" selection of the range.

If a two-prong slider does not suffice, you can use a regular slider ( and change the Value, Min and Max according to the desired business logic. Steve Sanderson had made a similar example 1-2 years ago with regular <input type=range> and a similar approach will work with the Telerik sliders too (video here, starts around the 10-11 minute mark). That's part of the business logic of the app and it can't really be a built-in feature of the sliders, though.

If you make such a sample, I'd encourage you to share it with the community by opening a pull request in this repo: We award such contributions with Telerik points.

Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at