Как лучше нарисовать шкалу на css?
Например так
HTML:<div class="progress">
  <div class="grayback"></div>
  <div class="strips"></div>
</div>
CSS3:.progress {
  position: relative;
  width: 600px;
  height: 20px;
  overflow: hidden;
  background: #ff3232;
  background: linear-gradient(to right, #ff3232 0%,#ff9600 33%,#ffff00 66%,#00ff00 100%);
}

.strips {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
  background-size: 6px 100%; /* Ширина деления = 6px / 2 = 3px */
}

.grayback {
  position: relative;
  left: 79%; /* Текущее состояние */
  width: 100%;
  height: 100%;
  background-color: #ddd;
}
Один из возможных способов:
2 картинки, первая цветная шкала, вторая ЧБ.
2 блока один над другим, в нижнем фон цветная в верхнем фон ЧБ, двигать фон верхнего блока.
Как двигать, тут зависит от условий и конкретной реализации, это можно либо JS инлайн стилями, либо создать кучу классов с позиционированием по шагам и переназначать класс. 
Или не блоки а псевдо классы after before, но они не подойдут если у ЧБ картинки есть градация оттенков от начала к концу, там потребуется доп. обертка.