Собственно, в чём вопрос. Делаю 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>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости