Scroll bar type controls to pan an SVG

I have an SVG where I want to pan the view box over the image. For example if I have an SVG with elements anywhere over an area 0->1000 by 0->1000 and I set the (square) viewbox to 0 0 500 500 I get the top left quarter; I set the view box to 250 250 500 500 I get the middle all as expected.

I have:

<svg viewbox="@svgViewBox"...... >.....

private string SvgViewBox => $"{PanHorizontal} {PanVertical} {ViewBoxWidth} {ViewBoxHeight}";

I can set values of PanHorizontal and PanVertical etc to show various parts of the SVG

I would really like something like scroll bars to bind to PanHorizontal and PanVertical . I've tried FluentSlider with horizontal and vertical alignment but can't figure out how to position them well around the SVG.

Is this a css problem? If so how do I place the controls to the right and below the svg?Any thoughts?

I've made a few attempts to position the flutentslider's but I'm in the dark.