将css应用于<input type =“range”/>

Question

我正在尝试在我的应用程序中设置输入滑块的样式。我将<input type="text">和<input type="range">标记相互依赖。我面临两个问题。

1.当我刷新文档时，滑块左侧的颜色具有独立于<input type="text">的默认宽度

2.当<input type="text">中给定的输入颜色在滑块中没有正确变化时（滑块拇指移动）。         

input[type="range"]{
        -webkit-appearance: none;
        -moz-apperance: none;
        border-radius: 6px;
        height: 8px;
        background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, #94A14E),
        color-stop(0.15, #C5C5C5)
      );
    }

    input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background-color:   #ffffff;
    border: 1px solid #CECECE;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    }   

<form>
  <div id="loanAmount">

    <div id="loanAmountText" class="input-group">
      <span class="input-group-addon">Loan Amount</span>
      <input type="number" step="any" oninput="rangeInput.value=loanAmount.value" id="amountBox" placeholder="eg.1100000" value="1100000" name="loanAmount" for="rangeInput" oninput="rangeInput.value=loanAmount.value" class="form-control" required/>
      <span class="input-group-addon input-group-addon-right"><i class="fa fa-rupee" style="font-size:20px"></i></span>
    </div>
    <div id="amountSlide">
      <input for="loanAmount" oninput="loanAmount.value=rangeInput.value" id="amountSlider" type="range" min="100000" max="10000000" name="rangeInput" required value="5000000" />
    </div>


  </div>


</form>

你可以告诉我我错过了什么吗？