如何创建带当前状态tooltip的自定义分段进度条

你需求的带分段颜色、动态点位、悬浮提示的进度线，不需要引入重型图表库，有以下两种高性价比实现方案：

最优方案：原生实现（无额外依赖） #

需求逻辑非常简单，几十行代码即可完成，步骤如下：

• 定义数值映射规则
  提前配置好进度线的数值边界和分段阈值，对应你给出的示例参数：最小阈值为85（绿色段左端）、分界阈值为155（红色段左端）、最大阈值为180（红色段右端）。当前值对应的横向位置百分比计算公式为：
  位置百分比 = ((当前值 - 最小阈值) / (最大阈值 - 最小阈值)) * 100%
• 布局实现
  用固定高度的div作为进度线轨道，内部按阈值比例放置绿色、红色两个分段块，再通过绝对定位放置当前点位的小圆点，将小圆点的left属性绑定上面计算出的百分比，即可实现点位随数值动态变化。
• Tooltip实现
  给小圆点绑定hover事件，悬浮时显示绝对定位的自定义气泡框，内容可自定义为当前数值或状态文本，加简单的CSS过渡即可实现平滑的显示隐藏效果。

现成轻量库选型（不想自行实现时选择） #

如果不想从零写基础逻辑，可以选择专门的轻量滑块组件，比图表库体积小很多，配置也更简单：

• React技术栈可使用rc-slider，支持自定义分段颜色、滑块样式、tooltip内容，完全匹配需求。
• Vue技术栈可使用vue-slider-component，同样支持自定义分段、动态点位和提示框。
• 原生JS场景可使用noUiSlider，无任何依赖，体积仅几十KB，配置灵活。

内容的提问来源于stack exchange，提问作者CODEforDREAM