How Do I Scale A Range Slider After Rotation

Question

I have the following code, but the slider does not scale to the height of the parent div. The parent div is a css grid component, and the slider needs to take up 80% of the hight. It needs to remain centered. The style of the parent div is included.

CSS

.audiomixer {
    width: 250px;
    height: 60%;
    margin-left: 5vw;
    margin-right: 5vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 10fr 1fr;
    gap: 0px 10px;
    grid-auto-flow: row;
    grid-template-areas:
    "bar slider"
    "nametag nametag";
}

.bar { grid-area: bar; }

.nametag {
    grid-area: nametag;
}

.slider { 
    grid-area: slider; 
    overflow: hidden;
}

input[type=range] {
    -webkit-appearance: none;
    margin:  40px  0;
    height:  100%;
    width: 100%;
    transform: rotate(-90deg);
    margin-top:  0px;
    /* Add overflow hidden to clip any transformed content */
    overflow: hidden;
    background-color: rbga(0,0,0,0);
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width:  100%;
    height:  12.8px;
    cursor: pointer;
    background: #2c3339;
    border-radius:  25px;
}

input[type=range]::-webkit-slider-thumb {
    height:  50px;
    width:  30px;
    border-radius:  7px;
    background: whitesmoke;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -19px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #2c3339;
}

HTML

<div class="audiomixer">
   <div class="bar"></div>
   <div class="slider"><input type='range' min='0' max='100' value='90' /></div>
   <div class="nametag"></div>
</div>

I was hoping that this would create a slider that is the height of the div, and that I could later shrink it to be just 80%.