<div id="inputDiv">
<h1>CSS3 background-blend-mode</h1>
 <form> 
 <div id="radioBM">
 <label><input type="radio" name="BM" value="color">color</label>
 <label><input type="radio" name="BM" value="color-burn">color-burn</label>
 <label><input type="radio" name="BM" value="color-dodge">color-dodge</label>
 <label><input type="radio" name="BM" value="darken">darken</label>
 <label><input type="radio" name="BM" value="difference" checked >difference</label>
 <label><input type="radio" name="BM" value="exclusion">exclusion</label>
 <label><input type="radio" name="BM" value="hard-light">hard-light</label>
 <label><input type="radio" name="BM" value="hue">hue</label>
 <label><input type="radio" name="BM" value="lighten">lighten</label>
 <label><input type="radio" name="BM" value="luminosity">luminosity</label>
 <label><input type="radio" name="BM" value="multiply">multiply</label>
 <label><input type="radio" name="BM" value="overlay">overlay</label>
 <label><input type="radio" name="BM" value="saturation">saturation</label>
 <label><input type="radio" name="BM" value="screen">screen</label>
 <label><input type="radio" name="BM" value="soft-light">soft-light</label>
 <br>
 <input type="text" name="BMcolor" id="BMcolor"  value="#abcdef">
  </div>
  
<input type="range" value='65' min="0" max="100"  autocomplete="off">
<!-- autocomplete="off" pare que Firefox no "recuerde" el valor del input "on refresh" -->

<!--<p>Aunque no lo parezca este es un &lt;input type=&quot;range&quot;&gt;. <br>
  Mueva el cursor para ver el cambio.</p>-->
</form>
</div>
/* 1 */
*{ box-sizing:border-box; margin:0; padding:0; color:white; font-size:15px; font-family:Georgia, "Times New Roman", Times, serif }
html,body{ width:100%; height:100%; background-color:#333;}
#inputDiv{ 
	width:820px; 
	margin: 150px auto; 
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
    -webkit-flex-direction : column;
    -ms-flex-direction : column;
    flex-direction : column;
	}
#inputDiv form{
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
  -webkit-flex-direction : row;
  -ms-flex-direction : row;
  flex-direction : row;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	}

h1{ font-size:200%; padding-left:270px; position:relative; bottom:50px; width:100%;}
#radioBM{
	width:140px;
	height:379px; 
	margin-right:30px;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
    -webkit-flex-direction : column;
    -ms-flex-direction : column;
    flex-direction : column;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	}
#radioBM input[type='radio']{ margin-right:10px;  font-size: 16px;}
#radioBM input[type='text']{ padding:3px;color:#333; margin-right:10px; font-size:80%;}

input[type='range']{ display:block; width:640px; height:379px;}
input[type='range']:focus {
  outline: none;
}
	
/* 2 */
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; 
}
input[type='range'], input[type='range']::-moz-range-thumb, input[type='range']::-moz-range-thumb {
  -moz-appearance: none; position:relative;
}

/* 2.1 THUMB */
input[type=range]::-webkit-slider-thumb{ height:100%; width:10px; background-color:transparent; cursor: col-resize;}
input[type=range]::-moz-range-thumb{height:100%; width:10px; background-color:transparent;  cursor: col-resize; border:none;}
input[type=range]::-ms-thumb{height:100%; width:10px; background-color:transparent;  cursor: col-resize;}


/* 2.2 TRACK */


input[type=range]::-webkit-slider-runnable-track{
	background: -webkit-linear-gradient(0deg, transparent 65%, #abcdef 65%),
	            0% 0% no-repeat  border-box url(http://c1.staticflickr.com/5/4049/4545882390_a5c0128dda_z.jpg);
	background-blend-mode: difference ;
    height:379px;}
input[type=range]:focus::-webkit-slider-runnable-track{outline: none;}

input[type=range]::-moz-range-track{
	background: -moz-linear-gradient(0deg, transparent 65%, #abcdef 65%),
	            0% 0% no-repeat  border-box url(http://c1.staticflickr.com/5/4049/4545882390_a5c0128dda_z.jpg);
	background-blend-mode: difference ;
    height:379px;}

input[type=range]::-ms-track{
	background: url(http://c1.staticflickr.com/5/4049/4545882390_a5c0128dda_z.jpg) no-repeat 0% 0%; 
	height:379px;}
	
input[type=range]::-ms-fill-lower{background-image:url(http://c1.staticflickr.com/5/4049/4545882390_a5c0128dda_z.jpg);} 
input[type=range]::-ms-fill-upper{background-color:red;} 
/* para añadir reglas CSS  de manera dinámica*/
var s = document.createElement('style');
var elInput = document.querySelector("input[type='range']");
var radioValue = "diference";
var thisColor = "#abcdef";
var thisForm = document.forms[0]
var radios = thisForm.BM;
var BMcolor = document.querySelector("#BMcolor");
var HEXpattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

document.head.appendChild(s);


thisForm.addEventListener("submit",function(e){e.preventDefault();},false);


BMcolor.addEventListener("change", function(e){console.log(this.value)
if(HEXpattern.test(this.value)){thisColor = this.value;}else{thisColor = "#abcdef"} 
getStyles(s,elInput.value,thisColor,radioValue);
},false);
 

for( var i = 0; i<radios.length; i++){
 radios[i].addEventListener("change", function(){	
 if(this.checked ===true){radioValue = this.value;}
 
 getStyles(s,elInput.value,thisColor,radioValue);

 }, false);
}


elInput.addEventListener('input',function(){ 
	getStyles(s,elInput.value,thisColor,radioValue);
}, false);

function getStyles(s,elInputValue,thisColor,radioValue){
	/* cambia el estilo del TRACK */
s.textContent ="input[type=range]::-webkit-slider-runnable-track{background:-webkit-linear-gradient(0deg, transparent "+elInputValue+"%, "+thisColor+" "+elInputValue+"%),0% 0% no-repeat  border-box url(http://c1.staticflickr.com/5/4049/4545882390_a5c0128dda_z.jpg);background-blend-mode: "+radioValue+";}\n"
s.textContent +="input[type=range]::-moz-range-track{background:-moz-linear-gradient(0deg, transparent "+elInputValue+"%, "+thisColor+" "+elInputValue+"%),0% 0% no-repeat  border-box url(http://c1.staticflickr.com/5/4049/4545882390_a5c0128dda_z.jpg);background-blend-mode: "+radioValue+";}";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.