【问题标题】：Circular Range slider with three specific parts (React project)具有三个特定部分的圆形范围滑块（React 项目）
【发布时间】：2020-06-01 21:53:34
【问题描述】：

enter image description here

嗨，我正在处理一个 React 项目，我必须创建一个圆上带有两个范围滑块的饼图。使用这两个滑块，您可以更改颜色部分的百分比，如图所示。我在网上搜索了几天，但没有找到等效的东西。有人知道如何在 Javascript（或使用 npm 包）中做到这一点吗？这对我很有帮助，我感到有点失落！！非常感谢。

【问题讨论】：

您能否向我们展示您迄今为止在代码和围绕类似组件的研究方面所做的尝试？您是否发现任何与您尝试实现的组件接近但不完全相同的类似组件？
你好Thomas，我还在找，我不知道我想要的是饼图还是圆形范围。我为 React 找到了一个 npm 包：“react-circular-slider”，但只有一个最小值和最大值。我试图用“charts.js”找到一些东西，但它的边缘没有带有滑块的饼图。我在“Gsap”上进行了搜索，但没有像我的图片或附近那样。我想自己编写代码，但我不知道如何开始这样的事情……我是初学者……

标签： javascript reactjs pie-chart rangeslider

【解决方案1】：

根据您的要求，该功能似乎是圆形范围滑块和饼图的组合。我不确定此用例的任何特定组件。

所以我使用roundSlider 和jqPlot 插件创建了这个。

您可以查看以下演示以满足您的要求：

`DEMO`

截图：

为了简单的演示，我使用了 jQuery 插件，但我希望这些也可以用于反应。所以我相信这可能会有所帮助您或至少有助于找到实现您要求的方向。

【讨论】：