Simple Basic Ruler with javaScript

by Adi Jaya

HTML

<div class="demo" id="demo"></div>
<div class="demo" id="demo2"></div>
<div class="demo" id="demo3"></div>

CSS

.demo {
    background: #d6edff;
    height: 45px;
    overflow: auto;
    margin-bottom: 16px;
    padding: 10px;
    display: flex;
}

.rulergroup {
    display: flex;
    float: left;
    height: 100%;
}

.rulerline {
    position: relative;
    display: inline-block;
    width: 4px;
    height: 100%;
    margin: 0;
    vertical-align: top;
    cursor: pointer;
}

.rulerline:before {
    content: "";
    display: block;
    height: 30%;
    background: #000000;
    width: 1.5px;
}

.rulerline1:before {
    height: 60%;
}

.rulerline2:before {
    height: 50%;
}

.rulerline1:after {
    content: attr(data-value);
    font-size: 80%;
    position: relative;
    top: 2px;
    left: -3px;
}

.rulerline:hover:before {
    background: red;
}

JavaScript

function createRuler(start, end) {
    var arr = [];
    for (var i = start; i < (end + 1); i++) {
        arr.push({
            x: i,
            y: [1, 2, 3, 4, 5, 6, 7, 8, 9]
        });
    }
    var h = "";
    for (var i = 0; i < arr.length; i++) {
        h += "<span class='rulergroup'>";
        h += "<span class='rulervalue rulerline rulerline1' data-value='" + arr[i].x + "' title='" + arr[i].x + "'></span>";
        if (arr[i].x !== (end)) {
            for (var j = 0; j < arr[i].y.length; j++) {
                var vl = arr[i].x + "." + arr[i].y[j];
                var cls = (arr[i].y[j] !== 5) ? "rulervalue rulerline" : "rulervalue rulerline rulerline2";
                h += "<span class='" + cls + "' data-value='" + vl + "' title='" + vl + "'></span>";
            }
        }
        h += "</span>";
    }
    return h;
}


//with jquery
$("#demo").html(createRuler(0, 10));
$("#demo2").html(createRuler(10, 25));

//without jquery
document.getElementById( "demo3" ).innerHTML = createRuler(100, 500);