Как создать слайдер 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 легко привязать к входному значению, но как я могу изменить положение пузырька?

0 ответов

Другие вопросы по тегам