Добавить картинку в <input type=range … >

181
14 сентября 2019, 13:30

Собственно, в чём вопрос. Делаю Range Slider. Хочу вот добавить вместо обычного range (она же кнопка прокрутки) изображение. Как это сделать?)

введите сюда код

Ссылка

Answer 1

Посмотрите как реализовано на 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>

READ ALSO
Как отправить файл по API без await/async

Как отправить файл по API без await/async

Подскажите, возможно ли обойтись без асинхронных операций await/async в коде, для загрузки файла?

141
Найти Label по Content и удалить его

Найти Label по Content и удалить его

Как программно можно найти дочерние элементы Label по их Content внутри Canvas и удалить их ? Создаются динамически и по ненадобности нужно удалять...

134
Element is not attached to the page document

Element is not attached to the page document

Помогите, пожалуйста, с решением проблемы element is not attached to the page documentРешил сделать програму по продаже карточек в Steam

174