Измените значение диапазона ввода при наведении указателя мыши или перемещении мыши

Question

Я пытаюсь обновить значение ввода при наведении на него мыши, но не работает.

$('#myRange').mousemove(function(e){
    console.log('hovering');
    console.log(e.pageX);
    $('.myRange::-webkit-slider-thumb').css({left: e.pageX});    
  })

.myRange {
        -webkit-appearance: none;
        width: 75%;
        height: 300px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        position: relative;
        &:hover {
          opacity: 1;
        }
        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          height: 150px;
          width: 50px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          cursor: pointer;
          margin-top: 20%;
          background-image: url('../img/arrow.svg');
        }
        &::-moz-range-thumb {
          width: 50px;
          height: 150px;
          cursor: pointer;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          cursor: pointer;
          background-image: url('../img/arrow.svg');
        }
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1" style="background-image: url('<?php echo $image;?>')" max="100" value="50" class="myRange" id="myRange">

Журналы консоли работают и обновляют положение каждый раз, когда я перемещаю мышь, большой палец не двигается

Answer 1

Технически это может быть дублированный вопрос .

Я изменил его части этого сообщения, чтобы установить значение вместо его получения. Только для вашего случая c. Я удалил стили ввода, чтобы увидеть решение.

Надеюсь, это поможет вам.

var valueHover = 0;
function calcSliderPos(e) {
    return (e.offsetX / e.target.clientWidth) *  parseInt(e.target.getAttribute('max'),10);
}

document.getElementById('myRange').addEventListener('mousemove', function(e) {
    valueHover = calcSliderPos(e).toFixed(2);
  this.value = valueHover;
});

<input type="range" min="1"" max="100" value="50" class="myRange" id="myRange">