Ползунок диапазона ввода, замените большой палец изображением не работает

Question

Я пытаюсь создать ползунок настраиваемого диапазона, используя css.

<style>
.slide-container {
  width: 300px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: #FFFFFF;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
    border-radius: 50%;
  background: #DAA521;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
    border-radius: 50%;
  background: #DAA521;
  cursor: pointer;
}

    </style>

И html:

<div class="slide-container">
     <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

Я хотел бы заменить background: #DAA521; на background: url('{% static 'images/coffee.png' %}');, чтобы большой палец превратился в картинку, а не просто в цветной круг. Однако на практике это не работает. Есть мысли?

Answer 1

Попробуйте использовать подробные правила background-*.

• background-image: url('the url to the image') - это изображение
• background-size: contain; - гарантирует, что изображение всегда содержится внутри кнопки
• background-position: center center; - изображение всегда находится в центре кнопки
• background-repeat: no-repeat; - изображение не повторяется

Просто используйте относительный или абсолютный путь к вашему stati c и оставьте код шаблона Django. Обычно не рекомендуется включать css в свои шаблоны, загружайте их непосредственно в браузере.

.slide-container {
  width: 300px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: #FFFFFF;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
    border-radius: 50%;
  background-image: url('https://img.icons8.com/material-outlined/344/average-2.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
    border-radius: 50%;
  background-image: url('https://img.icons8.com/material-outlined/344/average-2.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

<div class="slide-container">
     <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

Answer 2

заменить фон: # DAA521 на background-image: url ("путь к файлу изображения");