Проблемы с процентным использованием перетаскиваемых

Question

Я использую перетаскивание из пользовательского интерфейса Jquery для создания эффекта перетаскивания, сложность заключается в расчете от 0 до 100, позиции перетаскивания внутри панели.Вот что я сделал:

$('.drag').draggable({
	axis: 'x',
	containment: 'parent',
	drag: function() {
		var largura = $('.bar').width();
		var posicaoX = $(this).position().left;
		posicaoX = (posicaoX*100)/largura;
		var l = (100 * parseFloat($(this).position().left / parseFloat($(this).parent().width())));
		$('#show').val(l);
	}
});

.bar{
  width: 150px;
  height: 5px;
  background: #000000;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}
.drag{
  width: 20px;
  height: 20px;
  background: #d18f4f;
  position: absolute;
  top: -7px;
  left: 0px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="bar">
  <div class="drag"></div>
</div>
<input type="text" value="0" id="show">

Код кажется правильным, я думаю, мне нужно рассчитать размер перетаскивания и добавить или уменьшить общее значение, или что-то, можетты мне помогаешь?

Answer 1

Поскольку вы имеете дело с левым краем элемента .drag, вы должны учитывать ширину этого элемента, поскольку перетаскивание не позволит правой стороне скользить за конец .bar

Так просто:

var l = (100 * parseFloat($(this).position().left / parseFloat($(this).parent().width()-20)));

или

var l = (100 * parseFloat($(this).position().left / parseFloat($(this).parent().width() - $(this).width()));