.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 44px;
height: 44px;
border: 0;
background: url('icono_1.png');
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 44px;
height: 44px;
border: 0;
background: url('icono_1.png');
cursor: pointer;
}
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="myRange">
</div>
<div id="myRange"></div>
<div id="demo"></div>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Recojo el valor del control deslizante
// Funcion que actualiza el valor actual del control deslizante
//cada vez que se arrastre el control deslizante
slider.oninput = function()
{
output.innerHTML = this.value;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 44px;
height: 44px;
border: 0;
background: url('icono_1.png');
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 44px;
height: 44px;
border: 0;
background: url('icono_1.png');
cursor: pointer;
}
document.getElementById("pim::-moz-range-thumb").innerHTML.style.backgroundImage = "url('icono_1.png')";
<div id="myRange"></div>
<div id="demo"></div>
<div id="imagen"></div>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var imagen = document.getElementById("imagen");
output.innerHTML = slider.value; // Recojo el valor del control deslizante
// Funcion que actualiza el valor del div demo
//cada vez que se arrastra el control deslizante
slider.oninput = function()
{
output.innerHTML = this.value;
if(slider.value == 1)
{
imagen.innerHTML="<img src='icono_1.png'>";
}
if(slider.value == 3)
{
imagen.innerHTML="<img src='icono_3.png'>";
}
if(slider.value == 4)
{
imagen.innerHTML="<img src='icono_4.png'>";
}
if(slider.value == 5)
{
imagen.innerHTML="<img src='icono_5.png'>";
}
.custom {
cursor: url(images/my-cursor.png), auto;
}
changeBackgroundImage(".slider::-webkit-slider-thumb","url(icono_3.png)");
<div class="slidecontainer">
<input type="range" min="1" max="5" value="50" class="slider" id="rangoPuntuacion">
</div>
<div id="rangoPuntuacion"></div>
<div id="puntuacion"></div>
var varRangoPuntuacion = document.getElementById("rangoPuntuacion");
var varPuntuacion = document.getElementById("puntuacion");
varPuntuacion.innerHTML = varRangoPuntuacion.value; // Recojo el valor del control deslizante
// Funcion que actualiza el valor del div demo
//cada vez que se arrastra el control deslizante
varRangoPuntuacion.oninput = function()
{
varPuntuacion.innerHTML = this.value;
if(varRangoPuntuacion.value == 1)
{
changeBackgroundImage(".slider::-moz-range-thumb","url(icono_1.png)");
}
if(varRangoPuntuacion.value == 2)
{
changeBackgroundImage(".slider::-moz-range-thumb","url(icono_2.png)");
}
if(varRangoPuntuacion.value == 3)
{
//changeBackgroundImage(".slider::-moz-range-thumb","url(icono_3.png)");
changeBackgroundImage(".slider::-webkit-slider-thumb","url(icono_3.png)");
}
if(varRangoPuntuacion.value == 4)
{
changeBackgroundImage(".slider::-moz-range-thumb","url(icono_4.png)");
}
if(varRangoPuntuacion.value == 5)
{
changeBackgroundImage(".slider::-moz-range-thumb","url(icono_5.png)");
}
}
function changeBackgroundImage(className, value){
var ss = document.styleSheets;
for (var i=0; i<ss.length; i++) {
var ss = document.styleSheets;
var rules = ss[i].cssRules || ss[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText === className) {
rules[j].style.backgroundImage = value;
}
}
}
}
changeBackgroundImage(".slider::-webkit-slider-thumb","url(icono_3.png)");
rules[j].style.backgroundImage = value;