Custom Slider

by Gregory Guidero

HTML

<div class="range">
    <div class="range_border">
        <div class="range_background"></div>
        <div class="range_progress" style="width:210px;"> </div>
        <!--<input class="range_input" type="range" min="0" max="100" step="10" value="80" />-->
        <div class="range_input" min="0" max="100" step="10" value="80" style="left:210px;" />
    </div>
    <div class="range_text">80</div>
</div>

CSS

.range
{
    width:360px;
    height:30px;
    overflow:hidden;
    position:relative;
}
.range_border
{
    border:1px solid #fff;
    border-radius:20px;
    background:#f2f2f2;
    width:280px;
    height:20px;
    box-shadow:0px 1px 8px 0px rgba(0,0,0,0.5) inset;
    padding:4px 0px 2px 5px;
}
.range_progress
{
    background:#5ba9f6;
    border-radius:20px;
    box-shadow:0px 1px 4px 0px rgba(0,0,0,0.5) inset;
    height:10px;
    position:absolute;
    top:9px;
    left:9px;
}
.range_background
{
    background:#999;
    border-radius:20px;
    box-shadow:0px 1px 4px 0px rgba(0,0,0,0.5) inset;
    height:10px;
    width:270px;
    position:absolute;
    top:9px;
    left:9px;
}
.range_text
{
    position:absolute;
    height:24px;
    line-height:24px;
    padding:0px 7px 0px 22px;
    background:#CCCCCC;
    top:1px;
    left:268px;
    z-index:-1;
    border-radius:0px 20px 20px 0px;
    border:1px solid #f2f2f2;
    box-shadow:0px 1px 4px 0px rgba(0,0,0,0.5) inset;
    color:#333;
}
input[type="range"]
{
   -webkit-appearance: none;
    width:280px;
    background:none;
    position:absolute;
    top:7px;
    left:2px;
}
.range_input
{
    background:#333;
    height:20px;
    width:20px;
    position:absolute;
    margin-top:-1px;    
    margin-left:-10px;
    cursor:pointer;
}
input[type="range"]:focus
{
    outline:none;
}
input[type="range"]::-webkit-slider-runnable-track
{
    -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track:focus
{
    outline:none;
}
input[type="range"]::-webkit-slider-thumb
{
   -webkit-appearance: none;
    background:#fff;
    width:30px;
    height:20px;
    cursor:pointer;
    margin-top:-5px;
}
input[type="range"]::-webkit-slider-thumb:focus
{
    outline:none;
}

JavaScript

var range_input = document.getElementsByClassName('range_input');
var range_text = document.getElementsByClassName('range_text');
var range_progress = document.getElementsByClassName('range_progress');

var progress = 
{
    start:18,
    end:270,
    cur:210,
    min:0,
    max:100,
    val:80
}
var eventVars =
{
    start:0,
    curr:0,
    end:0,
    startPx:210,
    currPx:210,
    endPx:270,
    beginPx:18,
    isMoving:false,
    currNode:{}
}

for(var x=0;x<range_input.length;x++)
{
    range_input[x].setAttribute('data-id',x);
    
    range_input[x].onmousedown = function(e)
    {
        console.log('down');
        eventVars.start = e.clientX;
        eventVars.isMoving = true;
        eventVars.currNode = this;
        eventVars.startPx = parseInt(this.style.left);
    }
    document.onmousemove = function(e)
    {
        if(eventVars.isMoving)
        {
            eventVars.end = e.clientX;
            eventVars.curr = eventVars.end-eventVars.start;
            if((parseInt(eventVars.currNode.style.left) + eventVars.curr) >= eventVars.beginPx && (parseInt(eventVars.currNode.style.left) + eventVars.curr) <= eventVars.endPx)
            {
                eventVars.currNode.style.left = (eventVars.startPx + eventVars.curr)+'px';
                console.log(eventVars.currNode.style.left,eventVars.curr);
            }
        }
    }
    document.body.onmouseup = function(e)
    {
        if(eventVars.isMoving)
        {
            eventVars.isMoving = false;
        }
    }
    /*
    range_input[x].oninput = function(e)
    {
        range_text[this.getAttribute('data-id')].innerHTML = this.value;
        var pr = (100-(((progress.max-this.value)/progress.max)*100));
        var wr = progress.end*(pr/100);
        range_progress[this.getAttribute('data-id')].style.width = wr+'px';
    }
    */
}