nightowl nightowl - 1 year ago 55
CSS Question

Getting an accurate scale with differencing widths?

I have a scale that spans the container width 100%, but the scale itself only goes from 10-90. How do I accurately account for this difference? IE: when I input a data-value of 20, how do I get it to properly land on the "20" mark, instead of 20% of the overall scale?

example: 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>


These are the percentages to get to specific marks


  • 0 = 10

  • 12% = 20

  • 24.5% = 30

  • 37% = 40

  • 49.5% = 50

  • 61.5% = 60

  • 74% = 70

  • 86.5% = 80

  • 99% = 90


Answer Source

You can fix your percentage remapping the number with the different scale

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

return val;
}

and after pass your fixed number

check this pen https://codepen.io/sassoli/pen/NvqdYG

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download