input linear

input_linear.css

.input-example {
    width: 400px;
}

.input-block {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background-color: #fff;
}

.input {
    height: 20px;
    font-size: 14px;
}

.input-block-carriage {
    cursor: pointer;
    width: 20px;
    height: 10px;

}

// Создаем стрелку, посредством css
.input-block-carriage:after {
    height: 0;
    position: relative;
    top: -16px;
    width: 0;
    padding: 0;
    cursor: pointer;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.5rem solid #333;
    border-left: 0.5rem solid transparent;
    content: '';
}

input_linear.html

<div class="input-example">
    <input type="text" class="input input-block js-input-linear" placeholder="Тяни каретку!">
    <div class="input-block js-input-linear-carriage"><div class="input-block-carriage"></div></div>
</div>

input_linear.js

// Организуем в качестве примера демонстрацию работы события окончания "перетягивания" каретки
    $('.js-input-linear-carriage').on('carriage:move', function(e, args) {
            $('.js-input-linear').val(args.value);
        })
        .on('carriage:end', function(e, args) {
            $('.js-input-mouse-up').html(args.value);
        });

    UICarriage.create(
        $('.js-input-linear-carriage'),
        {
            maxOffset: 390,
            carriageMoveEvent: 'carriage:move',
            carriageMoveEndEvent: 'carriage:end'
        }
    );