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

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

Спасибо

Ожидается, что вы, по крайней мере, попытаетесь запрограммировать это для себя. Я бы посоветовал вам сделать дополнительное исследование либо через Google, либо путем поиска SO, попробовать и. если у вас все еще есть проблемы, вернитесь с ваш код и объясните, что вы пробовали.

— 19.09.2018 12:54

Да, Paulie_D прав, если бы вы исследовали, как создавать ползунки диапазона с нуля, вы бы его настроили.

— 19.09.2018 16:45

css html range materialize

19.09.2018 06:25

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 072

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Проверьте документы W3Schools на Ползунки диапазона, вы можете настроить, изменив такие значения, как - 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