【发布时间】：2019-12-05 09:13:22
【问题描述】：
我需要实现一个圆形滑块，我们可以在其中选择同一个滑块中的多个范围（附上下面的图片以供参考，以了解它的外观）。我找到了这个很棒的库rc-slider，它支持在单个滑块中选择多个范围，但是我只能看到水平和垂直滑块的示例，而且我在文档中找不到它支持多种形状的滑块的任何地方。那么，有没有办法用这个 rc-slider 或任何你知道的支持圆形和多范围选择的 react 组件库来实现圆形滑块？
提前致谢
【问题讨论】：
【发布时间】：2019-12-05 09:13:22
【问题描述】：
我不确定你是否还需要这个，但我相信下面的解决方案可以解决这个要求。
这可以通过roundSlider 插件进行自定义。下面我更新了您要求的 POC 示例。查看演示：
DEMO
注意：这也可以集成到 React 中。
编辑：
Swathi，根据您的 cmets，您可以使用 roundSlider 添加任意数量的手柄。您还可以自定义每个句柄行为。通过beforeValueChange 事件你可以决定所有的句柄行为。
此外，如果您想要每个句柄的范围，那么您可以将自定义范围添加到与每个句柄对应的滑块路径的顶部。
查看以下更新的演示：
DEMO 1
【讨论】：
-
嗨，Soundar，非常感谢您的回答。我已经检查了roundSlider，据我所知，roundSlider 提供了选择一个范围的能力，但我的要求是能够选择多个范围。例如：我想要 3 个句柄，每个句柄都有一个范围，1-30、31-50、51-100。当我用 roundSlider 做 POC 时，不能轻易做到。尝试了一些定制，它并不适合所有情况。您的 POC 示例是否支持 3 个句柄，每个句柄都有范围？
-
@Swathi 我已经根据您的 cmets 更新了答案，但您仍然可以进行各种自定义。