player-project/src/styles/Playerbar.scss

@import './adaptivefont.scss';
.playerbar {
    position: sticky;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    padding-top: -10px;
    background-color: #131341;
    @include adaptive-font(20, 13);

    &__range {
        margin: 0 10px 6px 10px;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
        
        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            border: 1px solid #000000;
            height: 20px;
            width: 20px;
            border-radius: 100%;
            cursor: pointer;
            margin-top: -8px;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        }

        &::-webkit-slider-runnable-track {
            width: 100%;
            border: 1px solid rgba(255, 255, 0, 0.26);
            height: 4px;
        }
    }

    &__info {
        display: flex;
        justify-content: space-between;
        width: 95%;
        margin: 0 auto;
    }

    button {
        //font-size: large;
        @include adaptive-font(20, 20);
        padding: 0.5%;
        background-color: yellow;
        border: none;
        margin: 0 5px;
    }
}

.timestamp {
    margin: 0 10px;
    font-weight: 500;
}

.plumline {
    &::-webkit-slider-runnable-track {
        background: #2f1dce;
    }
}

.blueline {
    &::-webkit-slider-runnable-track {
        background: #70b2e7;
    }
}

.yellowThumb {
    &::-webkit-slider-thumb {
        background: yellow;
    }
}

.blueThumb {
    &::-webkit-slider-thumb {
        background: #499fe6;
    }
}