JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div />
<ul id="label"></ul>
<input id="input" value="50000" placeholder="max value" />

CSS

div {
    width: 500px;
    height: 50px;
    background: #d83405;
}

ul {
    margin-top: 60px;
    display: inline-block;
    width: 500px;
    height: 20px;
}

li {
    display: inline-block;
    list-style: none;
    width: 100px;
    text-align: center;
}

input {
    width: 180px;
}

JavaScript

var graduations = 5;

var positioner = function (max) {

    var scale = Math.floor(Math.log(max) / Math.LN10);
    var base = Math.round(max / Math.pow(10, scale));

    // round to nearest 0.5
    base = Math.round(base * 2) / 2;   

    
    var graduationInterval = base / graduations * Math.pow(10, scale);
    
    return graduationInterval;

};

var printOut = function (gradInterval) {
    var label = $('#label');
    label.text('');

    if (isNaN(gradInterval)) {
        return;
    }
    
    for (var i = 1; i < graduations; i++) {
        label.append('<li>' + (gradInterval * i).toFixed(0) + '</li>');
    }
    
//    label.text(gradInterval);
};

$(function () {

    $('#input').on('keyup', function () {
    
        var num = parseInt($('#input').val(), 10) || 0;
        if (isNaN(num)) {
            num = 0;
        }
        printOut(positioner(num));
        
    });
    
    $('#input').trigger('keyup');

});