这是我想出来的，我相信你能做好剩下的。
我在这里所做的是为每个MIN和MAX值创建两个span。我稍后会得到这些span的值。在它们之间有一个div充当滑块。在滑块中有一个指示符将指出结果。
然后你得到输入的值，把它和它的最小值比较，这样我们就知道要移动多少，从这里开始它的基本数学和比较。

var maxSpan = document.getElementById('max')
var minSpan = document.getElementById('min')
var sliderSpan = document.getElementById('slider')
var input = document.getElementById('value')
var differenceInValue = maxSpan.innerHTML - minSpan.innerHTML
var sliderWidth = sliderSpan.offsetWidth

function myFunc() {
  var inputValue = input.value
  var inputPercent = inputValue - (+minSpan.innerHTML)
  var calculatePosition = calculatePos(inputPercent, sliderWidth, differenceInValue)
  document.getElementById('indicator').style.left = calculatePosition + 'px'
}

function calculatePos(x, y, z) {
  return (x * y) / z
}

.container {
  background-color: beige;
  text-align: center;
}

.slider {
  background-color: coral;
  width: 300px;
  display: inline-block;
  height: 20px;
  position: relative;
}

#indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 20px;
  display: inline-block;
  background-color: darkgreen;
}

<div class="container">
  <span id="min">4</span>
  <div class="slider" id="slider">
    <div id="indicator">&nbsp;</div>
  </div>
  <span id="max">6</span>
</div>
<input type="text" id="value" onchange="myFunc()">