Skip to content

Instantly share code, notes, and snippets.

@dmolsen
Created July 9, 2012 13:50
Show Gist options
  • Save dmolsen/3076696 to your computer and use it in GitHub Desktop.
Save dmolsen/3076696 to your computer and use it in GitHub Desktop.
jQuery-less version of Chris Coyier's Value Bubbles for Range Inputs
/**********************************************************
* jQuery-less version of Chris Coyier's
* Value Bubbles for Range Inputs
* http://css-tricks.com/value-bubbles-for-range-inputs/
**********************************************************/
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.3;
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);
}
}
}
}
window.onload = modifyInputs;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment