Javascript Angular8动画-以拖放方式扩展元素宽度

我寻找了一个类似的问题，但没有发现，因此：

我有一个滑块元素，就像视频播放器上的一样，可以控制播放视频的当前位置。 我想在从滑块的一条边向左拖动或向右拖动后展开/收缩滑块。 我尝试使用“mousedown”/“mouseup”事件处理的“旧”方式，但我更喜欢使用角度的方式

以下是HTML：

    <div
        id="scene-slider">
        <button (click)="shiftLeft()" class="slider-left-handle">
            <div class="handle-label"></div>
        </button>
        <div
            class="scene-length-label">
        </div>
        <button class="slider-right-handle">
            <div class="handle-label"></div>
        </button>
    </div>

当用户在单击“滑块右手柄”后移动鼠标时，我希望有一个拖动效果，该效果将导致“场景滑块”在移动方向上更改其宽度