A simple wrapper to create slidy <range> elements with values attached and javascript stuff attached.

slidery.js

/*jshint browser: true*/


function Slider (p) {
  if (!p.id) 
    throw new Error("Didn't pass an ID, can't do without :("); 
  var that = this; 

  var container = document.createElement("div"); 
  container.setAttribute("class", "box-slider"); 
  this.val = document.createElement("div");
  this.val.style = "text-align: center; font-family: monospace; width: 100%;" + (p.valStyle || ""); 

  this.range = document.createElement("input"); 

  this.range.setAttribute("type", "range"); 
  this.range.setAttribute("id", this.id); 
  this.range.setAttribute("name", this.id); 
  this.range.min = p.min || 0;
  this.range.max = p.max || 100;
  this.range.value = p.value || this.max/2;
  this.range.style = p.style || "";
  this.range.width = p.width || 100; 
  this.range.step = p.step || 1; 
  this.range.onchange = function(evt) { that.val.innerText = evt.target.value; };

  container.appendChild(this.range);
  container.appendChild(document.createElement("br"));
  container.appendChild(this.val); 

  this.box = container; 

  //return this; 

}

/* Usage: 

<script src="slider.js"></script>
<script> 
var slidy = new Slider({
  id: "derp"
});
// Set other properties here.

document.body.appendChild(slidy); 

Or more shortly: 

<script src="slider.js"></script>
<script> document.body.appendChild(new Slider({id: "hello-world"}).box);

*/