Возможно ли сделать такое?

Допустим ширина полоски - это 100%. В данном случае 100% это 20 - 10.

Осталось узнать процент заполнения.

var hFrom = 10,
    hTo = 22,
    hNow = 14,
    percent = 100 * (hNow - hFrom) / (hTo - hFrom);
$('.progress-line .fill').width(percent + '%');

<div class="progress-line">
  <div class="fill" style="width: 20%"></div>
</div>

.progress-line {
  height: 10px;
  width: 200px;
  background: #ddd;
}
.progress-line .fill {
  height: 100%;
  width: 0%;
  background: green;
}

https://jsfiddle.net/skywave/qvw3rdyu/6/