How to expand a slider over other elements when a button is hovered?

I've got some buttons in a horizontal div. Most of the buttons are just buttons, but one is a volume button. I'd like it to work similarly to a volume button on YouTube where upon hover, it'll expand a volume slider. However, I'd like to have the expansion be vertical over other elements on my page.

I'll be using the slider from bits-ui since I'm using Svelte without tailwind (normal css), and this is pretty much the only components library option without tailwind.

Could someone give me a hand with this? This is beyond what I'm capable of doing and I'm having trouble finding helpful resources on this.

Here's what I have so far:

<div class="footer">
<div class="playback-bar-area">
<div class="buttons-bottom">
    <span class="volume-button-container">
    <button class="action-button">Volume Button Here</button>
    <div class="volume-slider">
        <div class="volume-slider-content">
        <Slider.Root type="single" value={0} step={1} max={100} min={0}>
            <span class="span-slider-range">
            <Slider.Range class="range">
            </Slider.Range>
                <Slider.Thumb index={0} class="thumb">
                </Slider.Thumb>
            </span>
        </Slider.Root>
        </div>
    </div>
    </span>
    <button type="button" class="action-button" name="other buttons">other buttons</button>
    ...
    <button type="button" class="action-button" name="other buttons">other buttons</button>
</div>
</div>
</div>