Estou usando draggable do Jquery UI para fazer um efeito de arrastar (drag), a dificuldade está em calcular, de 0 a 100, a posição do drag dentro da barra. Veja o que já fiz:
$('.drag').draggable({
axis: 'x',
containment: 'parent',
drag: function() {
var largura = $('.barra').width();
var posicaoX = $(this).position().left;
posicaoX = (posicaoX*100)/largura;
var l = (100 * parseFloat($(this).position().left / parseFloat($(this).parent().width())));
$('#mostra').val(l);
}
});
.barra{
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="barra">
<div class="drag"></div>
</div>
<input type="text" value="0" id="mostra">
O código aparentemente está certo, acredito que eu tenha que calcular o tamanho do drag e somar ou diminuir do total, ou algo assim, conseguem me ajudar?