Модуль «input-resize»

Демо:

https://codepen.io/ildar-meyker/pen/MWLdpxL

Плагины:

https://jquery.com

https://imask.js.org/

Подключение:

//
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/imask@6.4.3/dist/imask.min.js"></script>

Разметка:

//
<div class="form-points">
    <div class="form-points__label">от</div>
    <div class="form-points__input">
        <input
            type="text"
            placeholder="0"
            class="js-number js-input-resize"
            data-placeholder-size="1"
            data-sign-size="7"
            data-min="0"
            data-max="400"
        />
        <div class="form-points__sign">баллов</div>
    </div>
    <div class="form-points__sep"></div>
    <div class="form-points__label">до</div>
    <div
        class="form-points__input form-points__input--last"
    >
        <input
            type="text"
            placeholder="400"
            class="js-number js-input-resize"
            data-placeholder-size="3"
            data-sign-size="7"
            data-min="0"
            data-max="400"
        />
        <div class="form-points__sign">баллов</div>
    </div>
</div>

Стили:

//
.form-points {
    display: flex;
    align-items: center;

    &__label {
        margin-right: 1rem;
        font-size: 1.5rem;
    }

    &__sep {
        height: 1.5rem;
        margin: 0 1.6rem;
        width: 1px;
        background: rgba(137, 154, 183, 0.2);
    }

    &__input {
        position: relative;
        input {
            border: 0;
            padding: 0;
            width: 10rem;
            background: transparent;
            font-size: 1.5rem;
            width: 8ch;
            outline: none;

            &::placeholder {
                color: #899ab7;
            }
        }

        &--last {
            input {
                width: 10ch;
            }
        }
    }

    &__sign {
        position: absolute;
        z-index: -1;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        font-size: 1.5rem;
        color: #899ab7;
    }
}

Инициализация:

//
function handleInput() {
    const signSize = $(this).data("sign-size");
    const placeholderSize = $(this).data("placeholder-size");
    const length = $(this).val().length;

    const width = length === 0 ? placeholderSize + signSize : length + signSize;

    $(this).css({
        width: width + "ch",
    });
}

$(function () {
    $(document).on("input", ".js-input-resize", handleInput);
  
  
    $(".js-number").each(function () {
        const min = $(this).data("min") || -Infinity;
        const max = $(this).data("max") || Infinity;

        IMask(this, {
            mask: Number,

            min,
            max,
        });
    });
});