Собственно, в чём вопрос. Делаю Range Slider. Хочу вот добавить вместо обычного range (она же кнопка прокрутки) изображение. Как это сделать?)
введите сюда код
Ссылка
Посмотрите как реализовано на CSS изменение вида RANGE:
input[type=range] {
-webkit-appearance: none;
margin-top: 0.5rem;
width: 100%;
border: none !important;
background: transparent;
padding: 0; }
input[type=range]:focus {
outline: none; }
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0.3rem;
cursor: pointer;
animate: 0.2s;
background: #eee;
border-radius: 5px; }
input[type=range]::-webkit-slider-thumb {
height: 1rem;
width: 1rem;
border-radius: 0.5rem;
background: #0275d8;
cursor: pointer;
-webkit-appearance: none;
margin-top: -0.35rem; }
input[type=range]::-moz-range-track {
width: 100%;
height: 0.3rem;
cursor: pointer;
animate: 0.2s;
background: #eee;
border-radius: 5px; }
input[type=range]::-moz-range-thumb {
height: 1rem;
width: 1rem;
border-radius: 0.5rem;
background: #0275d8;
cursor: pointer; }
input[type=range]::-ms-track {
width: 100%;
height: 0.3rem;
cursor: pointer;
animate: 0.2s;
background: transparent;
color: transparent; }
input[type=range]::-ms-fill-lower {
background: #e1e1e1;
border-radius: 10px; }
input[type=range]::-ms-fill-upper {
background: #eee;
border-radius: 10px; }
input[type=range]::-ms-thumb {
height: 1rem;
width: 1rem;
border-radius: 0.5rem;
background: #0275d8;
cursor: pointer; }
input[type=range]:focus::-ms-fill-lower {
background: #eee; }
datalist {
display: flex;
justify-content: space-between;
height: 6px;
overflow: hidden;
margin-top: -6px; }
datalist option::before {
content: '';
display: block;
width: 0;
border-right: 1px solid #DDD;
height: 10px;
padding-left: 3px;
text-indent: 0; }
<input type="range" id="size" name="size" class="form-control form-control-sm" min="1" max="5" step="1" list="range_list">
<datalist id="range_list">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Подскажите, возможно ли обойтись без асинхронных операций await/async в коде, для загрузки файла?
Как программно можно найти дочерние элементы Label по их Content внутри Canvas и удалить их ? Создаются динамически и по ненадобности нужно удалять...
Вылетает:
Помогите, пожалуйста, с решением проблемы element is not attached to the page documentРешил сделать програму по продаже карточек в Steam