#1 -webkit- gradient range

with js

by toubia95

HTML

<form>
<input id="gradient-range" type="range" name="foo" min="0" max="360" style="width: 300px;">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>

CSS

body {
    padding: 50px;
}

output { 
  position: absolute;
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  width: 40px; 
  height: 30px; 
  text-align: center; 
  color: white; 
  border-radius: 10px; 
  display: inline-block; 
  font: bold 15px/30px Georgia;
  bottom: 175%;
  left: 0;
}
output:after { 
  content: "";
  position: absolute; 
  width: 0;
  height: 0;
  border-top: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
form { position: relative; margin: 50px; width: 1200px; }

#gradient-range {
    -webkit-appearance: none !important;
    background-image:-webkit-linear-gradient(left, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));
    height:20px;
}
#gradient-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:hsla(0,0%,0%,.3);
    height:28px;
    width:10px;
    border-radius: 3px;
}

JavaScript

function modifyOffset() {
	var el, newPoint, newPlace, offset, siblings, k;
	width    = this.offsetWidth;
	newPoint = (this.value - this.getAttribute("min")) / (this.getAttribute("max") - this.getAttribute("min"));
	offset   = -1;
	if (newPoint < 0) { newPlace = 0;  }
	else if (newPoint > 1) { newPlace = width; }
	else { newPlace = width * newPoint + offset; offset -= newPoint;}
	siblings = this.parentNode.childNodes;
	for (var i = 0; i < siblings.length; i++) {
		sibling = siblings[i];
		if (sibling.id == this.id) { k = true; }
		if ((k == true) && (sibling.nodeName == "OUTPUT")) {
			outputTag = sibling;
		}
	}
	outputTag.style.left       = newPlace + "px";
	outputTag.style.marginLeft = offset + "%";
	outputTag.innerHTML        = this.value;
}
function modifyInputs() {
    
	var inputs = document.getElementsByTagName("input");
	for (var i = 0; i < inputs.length; i++) {
		if (inputs[i].getAttribute("type") == "range") {
			inputs[i].onchange = modifyOffset;
			// the following taken from http://stackoverflow.com/questions/2856513/trigger-onchange-event-manually
			if ("fireEvent" in inputs[i]) {
			    inputs[i].fireEvent("onchange");
			} else {
			    var evt = document.createEvent("HTMLEvents");
			    evt.initEvent("change", false, true);
			    inputs[i].dispatchEvent(evt);
			}
		}
	}
}
modifyInputs();