Javascript 范围滑块推荐亮点

我一直在寻找一种方法来突出显示范围滑块的起点和终点
以告知用户，除非他们知道自己在做什么，否则不要低于或高于推荐值

我一直在互联网上搜寻React/JavaScript滑块包，但还没有找到一个具有该功能的

我设计了我要找的东西，这是一张图片
正如你所看到的，每个滑块都有不同的高光，所以第一个滑块从15开始，一直变红到16.5，然后变绿到22.5，而第二个滑块有完全不同的高光开始和结束区域，这使得我无法在整个滑块上显示渐变色，因为我是基于从数据库中获取的数据来渲染这些滑块的，在数据库中我会获取诸如min、max、safeMin和safeMax等值

我目前正在使用此滑块
但也许我得从头开始做一个滑块？我想这会有点难，除非有人能帮我，我的一个滑块是温度滑块，它也需要2个值，如果这改变了什么