applying css to <input type="range"> - css

Question

I am trying to style the input slider in my application. I have the <input type="text"> and <input type="range"> tags dependent on each other. I am facing two problems.
1.When I refresh the document the color on the left of the slider has a default width independent of the <input type="text">
2.When an input in given in <input type="text"> the color doesn't properly vary in the slider (The slider thumb moves though).
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>
Could you please let me know what am I missing?