Приклади слайдерів (input із type="range")

<!-- Відповідний код HTML виглядає так -->
<p id="label-1">Оцініть рівень наданої послуги від 1 до 10</p>
<input type="range" min="1" max="10" value="5" id="input-range-1" aria-labelledby="label-1">

<!-- Відповідний код HTML виглядає так -->
<p id="label-2">Оцініть рівень наданої послуги від 1 до 10</p>
<p class="sr-only" id="description-2">Використайте цю шкалу, де 1 - це найнижча оцінка, а 10 - найвища.</p>
<input type="range" min="1" max="10" value="5" id="input-range-2" aria-labelledby="label-2" aria-describedby="description-2">

<style>
.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
</style>

<!-- Відповідний код HTML виглядає так -->
<p id="label-3">Оцініть рівень наданої послуги від 1 до 10</p>
<p class="sr-only" id="description-3">Використайте цю шкалу, де 1 - це найнижча оцінка, а 10 - найвища.</p>

<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center">
    <div style="width: 296px; padding-bottom: 8px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start">
        <div class="number-marker" aria-hidden="true">1</div>
        <div class="number-marker" aria-hidden="true">2</div>
        <div class="number-marker" aria-hidden="true">3</div>
        <div class="number-marker" aria-hidden="true">4</div>
        <div class="number-marker" aria-hidden="true">5</div>
        <div class="number-marker" aria-hidden="true">6</div>
        <div class="number-marker" aria-hidden="true">7</div>
        <div class="number-marker" aria-hidden="true">8</div>
        <div class="number-marker" aria-hidden="true">9</div>
        <div class="number-marker" aria-hidden="true">10</div>
    </div>
    <div>
        <input class="input_type_range" type="range" min="1" max="10" value="5" id="input-range-3" aria-labelledby="label-3" aria-describedby="description-3" style="width: 300px; padding: 0px; margin: 0px">
    </div>
</div>

<style>
.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.number-marker {
    color: #0075FF;
    width: 10px;
    height: 10px;
}
</style>

<!-- Відповідний код HTML виглядає так -->
<p id="label-4">Оцініть рівень наданої послуги від 1 до 10</p>
<p class="sr-only" id="description-4">Використайте цю шкалу, де 1 - це найнижча оцінка, а 10 - найвища.</p>

<div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center">
    <div style="width: 296px; padding-bottom: 8px; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start">
        <div class="custom-range-number-marker" aria-hidden="true">1</div>
        <div class="custom-range-number-marker" aria-hidden="true">2</div>
        <div class="custom-range-number-marker" aria-hidden="true">3</div>
        <div class="custom-range-number-marker" aria-hidden="true">4</div>
        <div class="custom-range-number-marker" aria-hidden="true">5</div>
        <div class="custom-range-number-marker" aria-hidden="true">6</div>
        <div class="custom-range-number-marker" aria-hidden="true">7</div>
        <div class="custom-range-number-marker" aria-hidden="true">8</div>
        <div class="custom-range-number-marker" aria-hidden="true">9</div>
        <div class="custom-range-number-marker" aria-hidden="true">10</div>
    </div>
    <div class="custom-range" role="slider" aria-labelledby="label-4" aria-describedby="description-4" aria-valuemin="1" aria-valuemax="10" aria-valuenow="5" aria-valuetext="5 із 10" tabindex="0" id="customSlider">
        <div class="range-track"></div>
        <div class="range-thumb" id="thumb" style="left: 44.4%"></div>
    </div>
</div>

<style>
.custom-range {
    display: inline-block;
    width: 300px;
    height: 30px;
    position: relative;
}.custom-range:focus {
    outline: 2px solid #5f4ee4;
}

.range-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, red, orange, yellow, limegreen, green);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
}

.range-thumb {
    width: 20px;
    height: 20px;
    background-color: #444;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
}

.custom-range-number-marker {
    color: #444;
    width: 10px;
    height: 10px;
}
</style>

<script>
/*
Реалізуйте необхідну поведінку елемента з дотриманням наступних умов:
- на елементі можна сфокусуватися за допомогою клавіатури;
- значення можна змінювати стрілками, мишею і жестами на сенсорному екрані;
- при кожній зміні значення елемента це значення має вказуватися в атрибуті "aria-valuenow";
- мінімально можливе значення має бути вказане в атрибуті "aria-valuemin";
- максимально можливе значення має бути вказане в атрибуті "aria-valuemax".
*/
</script>