как увеличить высоту слайдера диапазона

Question

У меня есть ползунок диапазона в моем приложении, я хочу, чтобы белый материал внутри div был длиннее, на 4 пикселя длиннее и на 4 пикселя короче, а также придал ему красную рамку

вот изображение

Как вы, ребята, можете видеть на изображении ниже, обе белые линии находятся внутри div. Я хочу, чтобы он был длиннее, чем div красного цвета.

Вот мой код

test.page. html

<div id="renderList-outer">
            <div class = "sides"></div>
            <div id="renderList-content">
                <ul>
                    <li *ngFor="let img of Imgs">
                        <img [style.width.px]="PixWidth" [src]="img.imgUrl"/>
                    </li>
                </ul>   
            </div>        
            <div class="wrap" role="group" aria-labelledby="multi-lbl">
                <label class="sr-only" for="a">Value A:</label>
                <input (ngModelChange)="onChangeVal(1)" name="min" id="a" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.min"/>
                <label class="sr-only" for="b">Value B:</label>
                <input (ngModelChange)="onChangeVal(2)" name="max" id="b" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.max"/>
            </div>
            <div class = "sides"></div>
        </div>

Вот код для test.page.s css

#renderList-outer{
    position: absolute;
    bottom: 1%;
    border-top: 3px solid #f51646;
    border-bottom: 3px solid #f51646;
    border-radius: 5px;
    display: flex;
    margin:2px;
}
#renderList-content {
  width: 100%;
}
.sides {
  width:20px;
  background-color: #f51646;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sides::before {
  content: '';
  display: block;
  width: 5px;
  height: 24px;
  background-color: white;
}
ul {
    display: table;
    width: 100%;
    list-style-type: none;
    height: 50px !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}
li {
    float: left;
    display: table-cell;
}
img{
    height: 50px !important;
}
*{
    font: inherit;
}
.wrap {
    --a: -30; 
    --b: 20; 
    --min: -50; 
    --max: 50;
    --dif: calc(var(--max) - var(--min));
    display: grid;
    grid-template: repeat(2, -webkit-max-content) 4em/ 1fr 1fr;
    grid-template: repeat(2, max-content) 4em/ 1fr 1fr;
    overflow: hidden;
    position: absolute;
    bottom: 1% !important;
    width: 100%;
    height: 52px !important;
    background: transparent;
}
.wrap::before, .wrap::after {
    grid-column: 1/ span 2;
    grid-row: 3;
    background: transparent;
    content: "";
}
.wrap::before {
    margin-left: calc(1em + (var(--a) - var(--min))/var(--dif)*18em);
    width: calc((var(--b) - var(--a))/var(--dif)*18em);
}
.wrap::after {
    margin-left: calc(1em + (var(--b) - var(--min))/var(--dif)*18em);
    width: calc((var(--a) - var(--b))/var(--dif)*18em);
} 
[id='multi-lbl'] {
    grid-column: 1/span 2;
}
.wrap, input[type='range']{  
    z-index:100000 !important;
}
.sr-only {
    position: absolute;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}
input[type='range'] {
    grid-column: 1/ span 2;
    grid-row: 3;
    z-index: 1;
    top: 0;
    left: 0;
    margin: 0;
    background: none;
    --col: transparent;
    pointer-events: none;
    // border: 1px solid #f51646;
}
input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb, input[type='range'] {
    -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
    width: 100%;
    height: 105%;
    background: none;
}
input[type='range']::-moz-range-track {
    width: 100%;
    height: 105%;
    background: none;
}
input[type='range']::-webkit-slider-thumb {
    border: none;
    width: 2em;
    height: 4em;
    border-radius: 0;
    background: linear-gradient(90deg, #fff 2px, transparent 0) calc(1em - 1px), radial-gradient(circle, var(--col) calc(1em - 1px), transparent 1em);
    pointer-events: auto;
}
input[type='range']::-moz-range-thumb {
    border: none;
    width: 2em;
    height: 4em;
    border-radius: 0;
    background: linear-gradient(90deg, #fff 2px, transparent 0) calc(1em - 1px), radial-gradient(circle, var(--col) calc(1em - 1px), transparent 1em);
    pointer-events: auto;
}
input[type='range']:focus {
    z-index: 2;
    outline: dotted 1px currentcolor;
}

А также, если возможно, измените цвет фона между двумя строками на синий, спасибо