добавить циферки в полузнок

<div class="slider-contribution">
            <div class="contribution">Первоначальный взнос</div> <br>
            <input type="range" min="0" max="10" value="0" id="percent" class="slider" >
            <datalist class="sliderPercent" id="rangeList-2">
                <option value="0" label="0">
                    <option value="1" label="10%">
                    <option value="2" label="20%">
                    <option value="3" label="30%">
                    <option value="4" label="40%">
                    <option value="5" label="50%">
                    <option value="6" label="60%">
                    <option value="7" label="70%">
                    <option value="8" label="80%">
                    <option value="9" label="90%">
                    <option value="10" label="100%">
            </datalist>
        </div>

я бы хотел чтобы под нужным значением на ползунке стояло правильное значение процентов