.slider {
    transform: rotate(-90deg);
    transform-origin: top right;
    -webkit-appearance: none;
    position: absolute;
    top: var(--y);
    right: calc(100vw - var(--x) - var(--w) - 10px);
    width: var(--h);
    height: 25px;
    background-color: var(--bg-col);
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin: 0px;
}

.slider:hover {
    background-color: var(--bg-col-hover);
}

.slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 25px;
     height: 25px;
     background: var(--font-col);
     opacity: 0.8;
     cursor: pointer;
}

.slider::-webkit-slider-thumb:hover {
    opacity: 1;
}