獲取差分寬度的精確比例？

Question

我有一個跨度爲100％的容器寬度的比例，但比例本身只有10-90。我如何準確解釋這種差異？ IE：當我輸入20的數據值時，如何才能使它正確登陸「20」標記，而不是整體比例的20％？

例如：https://codepen.io/anon/pen/jLPrMP

 <div class="score-scale"> 
     <ul data-animate="colorScale" data-value="20" class="scaleColors"> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <div class="scoreTick"></div> 
      <div class="scoreArrow"></div> 
     </ul> 
     <ul class="scaleTicks"> 
      <li>10</li> 
      <li>20</li> 
      <li>30</li> 
      <li>40</li> 
      <li>50</li> 
      <li>60</li> 
      <li>70</li> 
      <li>80</li> 
      <li>90</li> 
     </ul> 
     </div> 

這些是百分比，以獲得特定的標記

• 0 = 10
• 12％= 20
• 24.5％= 30
• 37 ％= 40
• 49.5％= 50
• 61.5％= 60
• 74％= 70
• 86.5％= 80
• 99％= 90

Answer 1

您可以修復你的百分比不同規模

function fixPercentage(val){ 
var offsetMin = 10; 
var offsetMax = 90; 
val = (val - offsetMin)/(offsetMax - offsetMin) * 100; 

return val; 
} 

重新映射數

並通過您的固定號碼

檢查此pe ñ https://codepen.io/sassoli/pen/NvqdYG