差分幅で正確な縮尺を取得していますか？

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; 
} 

で番号を再マッピングあなたの比率を修正することができます

と固定番号を渡した後

n https://codepen.io/sassoli/pen/NvqdYG