native javascript slider

by Alen Doe

HTML

<h1>Slider Demo</h1>
        <div id="slidercontainer">
            <div id="slider">
                <a href="#" id="knob" class="knob" style="left:0;"></a>
            </div>
        </div>
        <p id="coords">Coords</p>

CSS

* {margin:0; padding:0;outline:none;}
            h1 {text-align:center;}
            #slidercontainer {
                border:1px solid #000;
                width:500px;
                margin:0 auto;
                height:40px;
                position:relative;
            }
            #slider {
                width:90%;
                height:10px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                border:1px solid #ccc;    
                margin:15px auto;
                position:relative;
            }
            .knob{
                height:15px;
                width:15px;
                margin-left:-5px;
                border:1px solid #ccc;
                display:block;
                position:absolute;
                top:-3px;
                -webkit-border-radius:15px;
                -moz-border-radius:15px;
                border-radius:15px;
                background:#289ad7;
                background-image: linear-gradient(bottom, rgb(40,154,215) 16%, rgb(104,197,247) 55%);
                background-image: -o-linear-gradient(bottom, rgb(40,154,215) 16%, rgb(104,197,247) 55%);
                background-image: -moz-linear-gradient(bottom, rgb(40,154,215) 16%, rgb(104,197,247) 55%);
                background-image: -webkit-linear-gradient(bottom, rgb(40,154,215) 16%, rgb(104,197,247) 55%);
                background-image: -ms-linear-gradient(bottom, rgb(40,154,215) 16%, rgb(104,197,247) 55%);
                background-image: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.16, rgb(40,154,215)),
                    color-stop(0.55, rgb(104,197,247))
                );
            }
            .knob:hover {
                background:#68c5f7;
            }
            .knob:active, .active {
                background:#e0f5ff;
            }
           ...

JavaScript

//rid of mousemove event
            var mouseup = function(e){                
                document.onmousemove=null;                
                
            };

            //moves knob within contraints of slider
            var moveKnob = function(e){
                e = e || window.event;
                //max and min points of slider
                var maxX= knob.parentNode.clientWidth,
                    minX= 0;
                
                //checking to see where knob is within max and min points
                if (parseInt(knob.style.left, 10) >= minX && parseInt(knob.style.left, 10) <= maxX) {
                    knob.style.left = knobX+e.clientX-xcoor+"px";
                } else if (parseInt(knob.style.left, 10) < minX){
                    knob.style.left = minX + "px";
                    mouseup(e);    
                } else if (parseInt(knob.style.left, 10) > maxX){
                    knob.style.left = maxX + "px";
                    mouseup(e);
                }
                //display coordinates of knob
                document.getElementById("coords").innerHTML = knob.style.left;
                //take ugly selection rectangle off of knob in ie
                document.getElementById("knob").blur();
                return false;
            };
            
            var coordinates = function(e){
                e = e || window.event;
                
                var knob = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
                //if (knob.nodeType == 3)   //safari bug
                 //   knob = knob.parentNode;
                
                if (knob.id=="knob") {
                    
                      knobX=parseInt(knob.style.left, 10);
                    
                      xcoor=e.clientX;
                    
                      document.onmousemove=moveKnob;
                }  
                return false; 
            };    

           ...