Styling numbers in input range

Question

There is an example of styling. How to make the number on the right be in the slider's circle?

/* Стиль кнопки листалки */ input[type=range] { -webkit-appearance: none; max-width: 100%; margin: 0px; background-color: transparent; padding: 0px; border: none; height: auto; } input[type=range]::-webkit-slider-runnable-track { max-width: 100%; height: 7px; border:none; box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1); background-color: #e1d7be; border-radius: 5px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 24px; width: 24px; border-radius: 50%; background-color: #5b4a38; margin-top: -10px; } input[type=range]::-moz-range-track { max-width: 100%; height: 7px; border:none; box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1); background-color: #e1d7be; border-radius: 5px; } input[type=range]::-moz-range-thumb { -webkit-appearance: none; border: none; height: 24px; width: 24px; border-radius: 50%; background-color: #5b4a38; margin-top: -10px; } input[type=range]::-ms-track { -webkit-appearance: none; border: none; height: 24px; width: 24px; border-radius: 50%; background-color: #5b4a38; margin-top: -10px; color: transparent; } input[type=range]::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; }

 <form name="nomer_scrollbar"> <input type="range" name="ageInputName" id="ageInputId" min="1" max="$num_pages" oninput="ageOutputId.value = ageInputId.value" value="1" /> <output name="ageOutputName" id="ageOutputId">1</output> </form>

Accepted Answer · 2016-12-04T23:09:05

Added span , 3 css-rules and script:

 function update() { var inp = document.getElementById("ageInputId"); var out = document.getElementById("ageOutputId"); out.textContent = inp.value; out.style.left = (inp.value - inp.min) / (inp.max - inp.min) * 100 + "%"; } document.getElementById("ageInputId").addEventListener('input', update); update();

 form { display: inline-block; position: relative; } span { display: block; position: absolute; left: 12px; top: 0; right: 12px; bottom: 0; pointer-events: none; } output { position: absolute; top: 0; bottom: 0; margin: auto 0; transform: translateX(-50%); color: white; } /* Стиль кнопки листалки */ input[type=range] { -webkit-appearance: none; max-width: 100%; margin: 0px; background-color: transparent; padding: 0px; border: none; height: auto; } input[type=range]::-webkit-slider-runnable-track { max-width: 100%; height: 7px; border:none; box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1); background-color: #e1d7be; border-radius: 5px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 24px; width: 24px; border-radius: 50%; background-color: #5b4a38; margin-top: -10px; } input[type=range]::-moz-range-track { max-width: 100%; height: 7px; border:none; box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1); background-color: #e1d7be; border-radius: 5px; } input[type=range]::-moz-range-thumb { -webkit-appearance: none; border: none; height: 24px; width: 24px; border-radius: 50%; background-color: #5b4a38; margin-top: -10px; } input[type=range]::-ms-track { -webkit-appearance: none; border: none; height: 24px; width: 24px; border-radius: 50%; background-color: #5b4a38; margin-top: -10px; color: transparent; } input[type=range]::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; }

 <form name="nomer_scrollbar"> <input type="range" name="ageInputName" id="ageInputId" min="1" max="100" value="10" /> <span><output name="ageOutputName" id="ageOutputId"></output></span> </form>

Simply, if the page is not the first, then the figure rises to the beginning, but it’s necessary to the circle ...
By your example, I don’t understand, could you correct your example?

Styling numbers in input range

1 answer 1

More articles: