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