drag slider

by abenrob

HTML

<script src="https://dragdealer.googlecode.com/svn/tags/0.9.5/dragdealer.js"></script>
<div id='slider-box'>
    <div id="play" class="paused"></div>
    <div id='slider' class='dragdealer'>
        <div id='handle' class="handle">1</div>
    </div>
</div>

CSS

body {
    margin:0;
    padding:0;
}
#slider-box {
    right: 5%;
    top:40px;
    position: absolute;
    width: 90%;
    z-index: 999;
    display: table;
}
#play {
    cursor: pointer;
    text-align: center;
    width: 25px;
    height: 25px;
    border: 1px solid black;
    border-right:0;   
    color: black;
    text-decoration: none;    
    border-radius: 5px 0 0 5px;
}
.paused {
    background: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/32/play.png') no-repeat;
    background-size: cover;
}
.playing {
    background: url('https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/32/pause.png') no-repeat;
    background-size: cover;
}
#slider {
    width: 100%;
    position: relative;
    height: 25px;
    border: 1px solid black;
    background: white;
    display: table-cell; 
    border-radius: 0 5px 5px 0;
}

.dragdealer .handle {
    position: absolute;
    cursor: pointer;
    width: 35px;
    height: 25px;
    background: red;
    color: #fff;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    font-family: Oswald, Arial, sans-serif;
    border-radius: 5px;
}

JavaScript

var steps = 365,
    step = 1,
    steptime = 75,
    playstatus = false,
    handle = document.getElementById('handle'),
    timer;
    

var slider = new Dragdealer('slider', {
    steps: steps,
    snap: true,
    callback: function (x, y) {
        var z;
        if (x==0) {
            z=1;
        }
        else {
            z = (x*(steps-1))+1;
        }
        handle.innerHTML = Math.round(z);
        step = Math.round(z);
    }
});

function moveSlider(){
    timer = setInterval(function() {
        if (step == steps) {
            step = 0;
            slider.setValue(step / (steps-1));
            handle.innerHTML = Math.round(step+1);
            stopSlider();
            $('#play').toggleClass('playing paused');
            playstatus = false;
        }
        else {
            slider.setValue(step / (steps-1));
            handle.innerHTML = Math.round(step+1);
            step+=1;
        };
    },steptime);
    
};

function stopSlider(){
    clearInterval(timer);
    timer = null;
};

$('#play').click(function(){
    if (playstatus) {
        stopSlider();
        playstatus = false;
    }
    else {
        moveSlider();
        playstatus = true;
    };
    $('#play').toggleClass('playing paused');
});