jQuery Range Slider

Configurable jQuery slider for replacing default browser slider

by codingdude

HTML

<h1>jQuery Range Slider Demo</h1>
<form action="">
  
  <label for="theSlider">Slider</label>
  <input id="theSlider" type="range" min="0" step="0.01" max="1" value="0.2">
  <br/>
  <label for="theSlider1">Slider</label>
  <input id="theSlider1" style="width:250px" type="range" min="-500" max="200" value="-90">
</form>

CSS

.small-input-text{
  width:50px;
  border-radius:5px;
  border:1px solid #ccc;
  padding:0.5em;
}

JavaScript

(function($){

	function makeSVG(tag,attrs){
    var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs)
      el.setAttribute(k, attrs[k]);
    return el;
  }
  
  function makeDraggable(element,opts) {
    var min = opts.min,max=opts.max;
    element.addEventListener('mousedown', startDrag);
    element.addEventListener('mousemove', drag);
    element.parentNode.addEventListener('mousemove', drag);
    element.addEventListener('mouseup', endDrag);
    element.parentNode.addEventListener('mouseleave', endDrag);
    
    var selectedElement = null;
    function startDrag(evt) {
    	selectedElement = evt.target;
      console.log("startDrag");
    }
    function drag(evt) {
    	if (selectedElement != null){
      console.log("drag");
        evt.preventDefault();
        var coord = getMousePosition(evt);
        var cx =  Math.min(max,Math.max(min,coord.x));
        selectedElement.setAttributeNS(null, "cx",cx);
        opts.updateValue((cx-min)/max);
      }
    }
    function endDrag(evt) {
    	console.log("endDrag");
    	if (selectedElement != null){
        evt.preventDefault();
        var coord = getMousePosition(evt);
        var cx = Math.min(max,Math.max(min,coord.x));
        selectedElement.setAttributeNS(null, "cx", cx);
        opts.updateValue((cx-min)/max);
      }
    	selectedElement = null;
    }
  }  
  function getMousePosition(evt) {
    var CTM = evt.target.getScreenCTM();
    return {
      x: (evt.clientX - CTM.e) / CTM.a,
      y: (evt.clientY - CTM.f) / CTM.d
    };
  }
	$.fn.rangeSlider = function(options) {

  return this.each(function(){
  	$originalSlider = $(this);
    
    $wrapper = $(this).wrap("<span class='slider-wrap'></span>").parent();
    /* $wrapper.css({"position":"relative"}); */
    var rect = $(this).get(0).getBoundingClientRect();
    //fix for IE
    rect = {width:rect.width,height:rect.height,top:rect.top,bottom:rect.bottom,right:rect.right,left:rect.left};
    
    var...