Как сделать масштабирование линейки в HTML общего фиксированного размера, но которое можно разделить на обязательное нет. разделов, принимая пользовательский ввод

Question

Я делаю шкалу линейки, используя html, css, js, длина которой должна быть всегда фиксированной. При нажатии на шкалу между любыми двумя столбцами будет сгенерировано приглашение, и пользователь затем введет число, обозначающее "нет". разделов, по которым длина шкалы (между любыми двумя столбцами) будет разделена на равные части и отображена на ней.

например, если изначально масштаб |_____|_____|_____|, затем при нажатии на 2-й бар и вводе деления на 2, масштаб должен выглядеть следующим образом|_____|__|__|_____|

Я ссылался на следующую ссылку для изготовления линейки:

Как сделать масштабирование линейки в HTML и CSS

Но в ответе, приведенном в приведенной выше ссылке, пользователь должен вручную изменить значение атрибута "data-items", чтобы сделать другое нет. разделов каждый раз, а также, при изменении его значения, общий размер шкалы также увеличивается, что противоречит моему случаю.

Это то, что я кодировал до сих пор, и я действительно не знаю, как разделить любую полосу на входе пользователя без изменения общей длины.

https://jsfiddle.net/yoshi2095/pvjhLggz/9/

HTML:

<div>
<a href="#" onclick="inputNumber()"><ul class="ruler" data-items="10"></ul></a>         
</div>

CSS:

 .ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}

/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}

div {
margin-top: 2em;
}

JS:

function inputNumber() {

            var inputNum = prompt("Divide by");
            $("a").attr("data-items",inputNum);
        }


$(function() {
// Build "dynamic" rulers by adding items
$(".ruler[data-items]").each(function() {
    var ruler = $(this).empty(),
        len = Number(ruler.attr("data-items")) || 0,
        item = $(document.createElement("li")),
        i;
    for (i = 0; i < len; i++) {
        ruler.append(item.clone().text(i + 1));
    }
  });
});

Любая помощь будет принята с благодарностью. Благодарю.