Html css как задать стили ползунку input type="range"

Question

Есть элемент <input type="range" min="0" max="40" step="10" name="text">, задаю стили ползунку через селектор

input[type=range]::-moz-range-thumb {
    height: 100%;
    width: 2px;
    background: #fff;
    border: none;
}

Если задаю высоту в пикселях всё работает, но когда задаю в процентах, ничего не работает

Answer 1

Вот пример HTML:

    <div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="m">
    </div>

CSS:

    .slider {
      -webkit-appearance: none;
       width: 100%;
       height: 15px;
       border-radius: 5px;  
       background: #d3d3d3;
       outline: none;
       opacity: 0.7;
       -webkit-transition: .2s;
       transition: opacity .2s;
     }

     .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%; 
        background: #4CAF50;
        cursor: pointer;
      }

      .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
      }

DEMO

БЛОГ НА HUSL

Html css как задать стили ползунку input type="range"

Ответы (1 шт):