Slider value isn’t increasing on site, looked through HTML/CSS/JS and can’t figure it out [duplicate]

This is the code i have been using. Am i missing something obvious here? The slider itself works, and so does the amount when you hit the button to continue, but the actual value does not increase. Example, if i slide it to the end it stays at (1) instead of (5)

 <!-- Start of Slider Code -->
    <div class="slidercontainerdiv">
            <span id="rangeValue">1</span>
            <Input id="amount" type="range" value="1" min="1" max="5" onChange="rangeSlide(this.value)" onmousemove="rangeSlide(this.value)">
            
    </div>
    
    
      <script>
             type="text/javascript">
             function rangeSlide(value) {
                document.getElementById('rangeValue').innerHTML = value;
              }
         </script>
         
    <!-- End of Slider HTML/JSCode --> 
    
    
    <!-- Start of Slider CSS -->
      <style> 
      
      .slidercontainerdiv {
        width:25%;
      }
      
      
        #rangeValue {
        width: auto%;
        display: block;
        text-align: center;
        font-size: 25px;
        color: white;
        font-weight: 100;
        
      }
      .range {
        width: 25%;
        height: 15px;
        -webkit-appearance: none;
        background: white;
        outline: none;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: inset 0 0 5px white;
      }
      .range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
        border: 1px solid blue;
        box-shadow: -407px 0 0 400px white;
      }
    </style>
    <!-- End of Slider CSS -->