具有“可接受范围”指标的CSS Meter / Progress Bar

Question

我正在制作CSS中的一些仪表，以显示某些值是否在可接受的参数范围内。我已经找到了很多关于在CSS中创建进度条的资源，我将我的工作基于。

然而，虽然我已经找到了如何根据显示的值/进度更改条形颜色的来源，但我找不到任何可以让您清楚地显示其更改位置的限制的内容。如果它太高或太低，我想让酒吧改变颜色并显示它与“可接受的范围”有多接近。

这就是我目前所拥有的：

这就是我想要的（在MS Paint中制作）：

请参阅我的JSFiddle：https://jsfiddle.net/alphabetaparkinglot/d0n5srt2/1/

HTML：

<div class="progress-bar blue glow">
    <span style="width: 40%"></span>
</div>

<div class="progress-bar green glow">
    <span style="width: 60%"></span>
</div>

<div class="progress-bar red glow">
    <span style="width: 90%"></span>
</div>


<div id="moving-bar" class="progress-bar glow">
    <span style="width: 0%"></span>
</div>

<button id='Add10'>
    <span>+10%</span>
</button>

CSS：

.progress-bar {
    background-color: #fafafa;
    height: 25px;
    padding: 1px;
    width: 350px;
    margin: 50px 0;         
    border-radius: 5px;
    border: 5px solid black;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;       
}

.progress-bar span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;    
}

.blue span {
    background-color: #34c2e3;   
}

.green span {
      background-color: #3d8b3d;
      /* background-image: linear-gradient(top, #fecf23, #fd9215); */  
}   

.red span {
      background-color: #b52b27;
      /*background-image: linear-gradient(top, #a5df41, #4ca916); */  
}

.glow span {
    box-shadow: 0 3px 3px rgba(255, 255, 255, .7) inset, 0 -3px 3px rgba(255, 255, 255, .7) inset;            
}