Изменить значок диапазона с помощью Img Materialise CSS

Question

Могу ли я изменить значок Range Slider из Materialise?

Спасибо

Answer 1

Если вы покопаетесь глубже в файле materialize.css , вы обнаружите это, редактируя несколько вещей из этого, вы можете настроить ползунок.

Проверьте документацию W3Schools on Ползунки диапазона , вы можете настроить их, изменив такие значения, как - border, height, width, border-radius и многие другие.Не забудьте переопределить их с помощью !important.

input[type=range]::-webkit-slider-thumb {
        border: 1px solid #000;
        height: 20px;
        width: 20px;
        border-radius: 25% !important;
        background: #4826a6 !important;
        -webkit-transition: -webkit-box-shadow .3s;
        transition: -webkit-box-shadow .3s;
        transition: box-shadow .3s;
        transition: box-shadow .3s, -webkit-box-shadow .3s;
        -webkit-appearance: none;
        background-color: #26a69a;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        margin: -10px 0 0 0;
    }

Пользовательский ползунок диапазона

Как создать Range Slider - W3Schools