Progressbar with marks.

http://stackoverflow.com/questions/17812444/progress-bar-with-slide-ability/17812626#17812626

HTML

<div class="marker" id="StartMarker">^</div>
<div class="marker" id="StopMarker">^</div>
<progress id="progress" value="0" min="0" max="100">0%</progress>
<form id="choice">

    <input type="hidden" id="markerValue" value="0" />
</form>

CSS

.marker {
    position:absolute;
    top:24px;
    left:9px;
    display:none;
    z-index:8;
    font-weight:bold;
    text-align:center;
}
#StartMarker {
    color: #CF0;
}
#StopMarker {
    color:#F00;
}
#choice {
    display:none;
    margin-top:20px;
}
progress {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 300px;
    height: 20px;
    padding: 3px 3px 2px 3px;
    background: #333;
    background: -webkit-linear-gradient(#2d2d2d, #444);
    background: -moz-linear-gradient(#2d2d2d, #444);
    background: -o-linear-gradient(#2d2d2d, #444);
    background: linear-gradient(#2d2d2d, #444);
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 15px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}

JavaScript

document.getElementById('progress').onclick = function (event, element) {
    /* Math.floor((event.offsetX / this.offsetWidth) * 100) */
    var newProgress = event.offsetX;

    document.getElementById('choice').style.display = "block";
    document.getElementById('markerValue').setAttribute('value', newProgress);


        event.preventDefault();

        var newProgress = document.getElementById('markerValue').value;
        var progressBar = document.getElementById('progress');
        var startMarker = document.getElementById('StartMarker');
        var stopMarker = document.getElementById('StopMarker');

        var marker = startMarker;
        marker.style.display = "block";

        startMarker.style.display = "block";
        startMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
        startMarker.style.left = newProgress + "px";

  

    document.getElementById('marker2').onclick = function (event) {
        event.preventDefault();

        var newProgress = document.getElementById('markerValue').value;
        var progressBar = document.getElementById('progress');
        var startMarker = document.getElementById('StartMarker');
        var stopMarker = document.getElementById('StopMarker');


        stopMarker.style.display = "block";
        stopMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
        stopMarker.style.left = newProgress + "px";
    };
};