How to implement an vertical range slider with interactjs?

Question

I implemented a vertical range slider based on the interactjs example here

The basic slider works well so far: jsfiddle

Now I want to add the slider to my website.

On the website, the slider is inside a grid-div with the classes col-4 and h-100, so the div has a variable height and width.

 <div class="h-100 w-100 d-flex flex-column align-items-center justify-content-between container-zoom-one" style="border:1px solid #ADADAD; border-radius: 0.25rem;">
                   
      <div class="slider-categorie"><i class="bi bi-search"></i></div>
      <div class="slider-frame">
           <div class="slider"></div>
      </div>
      <output class="slider-output">0</output>
 
 </div>

I also have a div above and below the slider to show the category and the value of the slider. I tried to give these divs a fixed height and the slider should use the full space.

My website looks someting like this

By moving the thumb up to 100, you can see weird behavior. On my website, the behavior is even weirder. I can't get the thumb up to 100 and the div's height (js variable sliderHeight) is getting bigger and bigger.