input range

con css input range javascript

by femfoyou

HTML

<p class="range">
<input type="range" min="0" max="100" value="25" step="1" id="test2">
<output></output>
<span data-min="0" data-max="100"></span>
</p>

CSS

* {margin: 0;padding: 0;box-sizing: border-box;}
:focus, a, a:active, a:focus, a:hover, button, button:focus
{
  outline-width: 0px;
  outline-style: none;
}
p.range {
  padding: 20px;
	padding: 0 20px;
	width: 100%;
	position: relative;
}
input[type=range] {
	-webkit-appearance: none;
	height: 35px;
	padding: 0;
	width: 100%;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-sizing: content-box;
	border: 12px solid #a6d8ef;
	height: 24px;
	width: 24px;
	border-radius: 18px;
	background-color: #5082e0;
	cursor: ew-resize;
	margin-top: -14px;
	opacity: .7;
}

input[type=range]::-moz-range-thumb {
	border: 12px solid #a6d8ef;
	height: 8px;
	width: 8px;
	border-radius: 18px;
	background-color: #5082e0;
	cursor: ew-resize;
	margin-top: -14px;
	opacity: .7;

}

input[type=range]::-ms-thumb {
	display: inline-block;
	border: 12px solid #a6d8ef;
	height: 8px;
	width: 8px;
	border-radius: 18px;
	background-color: #5082e0;
	cursor: ew-resize;
	margin-top: 5px; /* note: different margin-top for IE */
}


input[type=range]::-webkit-slider-runnable-track {
	height: 3px;
	border-color: transparent;
	color: transparent;
	background-color: #cccccc;	
}

input[type=range]::-moz-range-track {
	height: 3px;
	background-color: #cccccc;	
}

input[type=range]::-ms-track {
	border-color: transparent;
	color: transparent;
	height: 3px;
	background-color: #cccccc;	
}

input[type=range]::-ms-fill-lower {
	background-color: #5082e0;	

}

input[type=range]::-moz-range-progress {
	background-color: #5082e0;	
}

input[type=range]::-ms-tooltip {
	display: none;
}
p.range {
	margin-top: 25px;
}

p.range output {
	position: absolute;
	top: -25px;
	left: 0;
	width: 100%;
	height: 20px;
	text-align: center;
	font-weight: bold;
}

p.range span {
	width: 100%;
	display: block;
	height: 20px;
	position: relative;
}

p.range span:before {
	content: attr(data-min);
}

p.range span:after {
	position: absolute;
	right: 0;
	content: attr(data-max);
}

JavaScript

//<input type="range" id="rango">
//<p id="numero"></p>

//var valor = document.getElementById('rango').value;
//document.getElementById('numero').innerHTML = valor;


// input range
var p = document.getElementById("fader"),
    res = document.getElementById("contenido"),
    res2 = document.getElementById("fontsize");


var style = document.createElement('style');
style.type = 'text/css';

p.addEventListener("input", function() {

var curFontSize = p.value;
localStorage.setItem('myFontSize', curFontSize);
var ls = localStorage.getItem('myFontSize');

res.style.fontSize = ls+"px";
res2.innerHTML = ls;

style.innerHTML = "input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg,#FF9800 "
+ ls +"%,#cccccc 26%); }";

}, false);


document.getElementsByTagName('head')[0].appendChild(style);

function changeFontSize(target) {
  var demo = document.getElementById("contenido");
  var computedStyle = window.getComputedStyle
        ? getComputedStyle(demo) // Standards
        : demo.currentStyle;     // Old IE
  
  var fontSize;

  if (computedStyle) { // This will be true on nearly all browsers
    
    fontSize = parseFloat(computedStyle && computedStyle.fontSize);

    if (target == document.getElementById("button1")) { fontSize += 5; } 
    else if (target == document.getElementById("button2")) { fontSize -= 5;}
      demo.style.fontSize = fontSize + "px";
  }

  localStorage.setItem('myFontSize', fontSize);
  p.value = localStorage.getItem('myFontSize');
  res2.innerHTML = localStorage.getItem('myFontSize');
}

res.style.fontSize = localStorage.getItem('myFontSize')+"px";
res2.innerHTML = localStorage.getItem('myFontSize');
p.value = localStorage.getItem('myFontSize');

style.innerHTML = "input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg,#FF9800 "
+ localStorage.getItem('myFontSize') +"%,#cccccc 26%); }";