Input range slider, replace thumb with image not working
I am trying to create a custom range slider using 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> And the html:
<div class="slide-container"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> </div> I would like to replace background: #DAA521; with background: url('{% static 'images/coffee.png' %}'); so that the thumb becomes a picture instead of just a coloured circle. However in practice, this doesn’t seem to work. Any thoughts?
replace background: #DAA521 with background-image: url("path to your image file");
Try to use the detailed background-* rules.
background-image: url('the url to the image') – this is the image background-size: contain; – makes sure the image is always contained inside the button background-position: center center; – image is always in the center of the button background-repeat: no-repeat; – image is not repeated
Just use relative or absolute path to your static image, and drop the Django template code. It’s generally not a good practice to include css into your templates, load them directly with the browser.
.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>
