Multiple Sliders in a single instance

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 15 Jun 2021 19:05 by ADMIN

Robert

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: https://nightcatsama.github.io/vue-slider-component/#/basics/process

Any chance this could be possible? Thanks!

1 comment

ADMIN

Marin Bratanov

Posted on: 15 Jun 2021 19:05

Hello Robert,

We have the range slider to select a bottom and upper limits: https://demos.telerik.com/blazor-ui/rangeslider/overview. 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 (https://demos.telerik.com/blazor-ui/slider/overview) 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: https://github.com/telerik/blazor-ui. We award such contributions with Telerik points.

Regards,
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 https://learn.telerik.com/.