Как создать слайдер Range со значением пузырь?
Посмотрите на этот пример: https://codepen.io/yannicvanveen/pen/HtvbI
<form>
<div class="range-control">
<input id="inputRange" type="range" min="100" max="250" step="5" value="200" data-thumbwidth="20">
<output name="rangeVal">50</output>
</div>
</form>
$('input[type="range"]').on('input', function() {
var control = $(this),
controlMin = control.attr('min'),
controlMax = control.attr('max'),
controlVal = control.val(),
controlThumbWidth = control.data('thumbwidth');
var range = controlMax - controlMin;
var position = ((controlVal - controlMin) / range) * 100;
var positionOffset = Math.round(controlThumbWidth * position / 100) -
(controlThumbWidth / 2); var output = control.next('output');
output
.css('left', 'calc(' + position + '% - ' + positionOffset + 'px)')
.text(controlVal);
});
В AMP легко привязать к входному значению, но как я могу изменить положение пузырька?