Dynamic Range Slider with start values, end values and error bubbles

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
   
    <button id="rangeCreator">Create a range</button>
    



    <script src="script.js"></script>
   
  </body>

</html>

// Code goes here
var rangeCreator = document.getElementById('rangeCreator');

rangeCreator.addEventListener('click', function(){
  
  /*
  <div id="slider">
    <span id="startValue"></span>
    <input type="range" min="0" max="xxx" id="myRange">
    <span id="endValue"></span>
  </div>
  */

  
  var divSlider = document.createElement('div');
  divSlider.setAttribute('id', 'slider');
  
  var spanStartValue = document.createElement('span');
  spanStartValue.innerHTML = "0";
  
  
  var rangeInput = document.createElement('input');
  rangeInput.setAttribute('type', 'range');
  rangeInput.setAttribute('min', '0');
  rangeInput.setAttribute('max', '100');
  rangeInput.setAttribute('id', 'myRange');
  rangeInput.setAttribute('name', 'myRange');
  rangeInput.addEventListener('input', displayValue);
  
  
  var spanEndValue = document.createElement('span');
  spanEndValue.innerHTML = "100";
  
  var outputElement = document.createElement('output');
  outputElement.setAttribute('id', 'myOutput');
  outputElement.setAttribute('for', 'myRange');
  
  
  document.body.appendChild(divSlider);
  divSlider.appendChild(spanStartValue);
  divSlider.appendChild(rangeInput);
  divSlider.appendChild(outputElement);
  divSlider.appendChild(spanEndValue);
  
  
});

function displayValue(event) {
  var rangeInput = document.getElementById('myRange');
  var width = rangeInput.offsetWidth;
  
  var min = rangeInput.getAttribute('min');
  var max = rangeInput.getAttribute('max');
  
  var newPoint = (event.target.value - min)/(max - min);
  
  var offset = -1.3;
  
  var newPlace;
  if (newPoint < 0) {
    newPlace = 0;
  } else if (newPoint > 1 ) {
    newPlace = width;
  } else  {
    newPlace = width * newPoint + offset;
    offset -= newPoint;
    
  }
    
  var outputElement = document.getElementById('myOutput');  
  outputElement.value = event.target.value;
  outputElement.style.left = newPlace;
  outputElement.style.marginLeft = offset + "%";
  
  
}

/* Styles go here */

/* This is for formatting in chrome, safari and opera only. It will not work in firefox */
input[type='range'] {
  -webkit-appearance:none;
  width: 80%;
  border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #fff;
}

input[type='range']::-webkit-slider-thumb {
 -webkit-appearance: none;
 background-color: #ecf0f1;
 border: 1px solid #bdc3c7;
 width: 20px;
 height: 20px;
 border-radius: 10px;
 cursor: pointer;
}


/* The above styles will not work in Firefox. For firefox we have to write seperate styles*/
input[type=range]::-moz-range-track {
  width: 80%;
  border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #fff;
}

input[type=range]::-moz-range-thumb {
  background: #ecf0f1;
  border: 1px solid #bdc3c7;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
  
}


/* The above styles will not work in IE */
input[type='range']::-ms-fill-lower,
input[type='range']::-ms-fill-upper {
  background: transparent;
}

input[type='range']::-ms-track {
  width: 80%;
  border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #fff;
}

input[type="range"]::-ms-thumb {
  background-color: #ecf0f1;
  border: 1px solid #bdc3c7;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
}


div#slider {
  width: 500px;
  height: 50px;
  background: #E8E8F0;
  position: relative;
  margin-top: 100px;
}

output {
  
  
  background: black;
  width: 40px;
  height:30px;
  text-align: center;
  color: white;
  border-radius: 10px;
  display: inline-block;
  font: bold 15px/30px Georgia;
  position: absolute;
  bottom: 175%;
  left: 0;
  margin-left: -1%;
  
}


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;
  
}

// DOM Ready
$(function() {
 var el, newPoint, newPlace, offset;
 
 // Select all range inputs, watch for change
 $("input[type='range']").change(function() {
 
   // Cache this for efficiency
   el = $(this);
   
   // Measure width of range input
   width = el.width();
   
   // Figure out placement percentage between left and right of input
   newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
   
   // Janky value to get pointer to line up better
   offset = -1.3;
   
   // Prevent bubble from going beyond left or right (unsupported browsers)
   if (newPoint < 0) { newPlace = 0; }
   else if (newPoint > 1) { newPlace = width; }
   else { newPlace = width * newPoint + offset; offset -= newPoint; }
   
   // Move bubble
   el
     .next("output")
     .css({
       left: newPlace,
       marginLeft: offset + "%"
     })
     .text(el.val());
 })
 // Fake a change to position bubble at page load
 .trigger('change');
});