如何使用jQuery滑块覆盖html输入字段？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input type="text" id="inputField">
<div id="slider"></div>

$(document).ready(function() {
  $('#slider').attr('draggable', 'true');
});

$(document).ready(function() {
  $('#slider').attr('draggable', 'true');
  
  $('#slider').on('drag', function(event) {
    var sliderPosition = event.pageX; // 获取滑块的位置
    $('#inputField').val(sliderPosition); // 将滑块位置赋值给输入字段
  });
});