.slider-rail {
        width: calc(100% - 10px); /* Адаптивно под твой margin: 5px */
        max-width: 400px;
        height: 80px;
        background: #fff; /* Белый, как в твоих .trak */
        border: 1px solid #dbcdcd; /* Твой цвет границы из .button1 */
        position: relative;
        display: flex;
        align-items: center;
        margin: 5px;
        box-sizing: border-box;
    }

    /* Салазки (внутренняя дорожка) */
    .track {
        position: absolute;
        left: 10px;
        right: 10px;
        height: 50px;
        background: #f3efe5; /* Твой фоновый цвет сайта */
        border: 1px solid #ccc; /* Как у твоего инпута #newTrakName */
        box-sizing: border-box;
    }

    /* Кнопка-бегунок */
    .handle {
        width: 70px;
        height: 60px;
        background: #37586c; /* Твой основной синий цвет */
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: absolute;
        /* Асимметрия: отступ слева чуть больше, чем у салазок */
        left: 20px; 
        z-index: 2;
        font: bold 20px Verdana; /* Твой шрифт */
        text-transform: uppercase;
        touch-action: none;
        border: 1px solid #030303;
        box-sizing: border-box;
    }

    /* Состояние, когда действие выполнено */
    .handle.complete {
        background: #919fa3; /* Твой цвет .btnItem:disabled */
    }