Zoom Into Foreign Object

A HTML input text element and input range element(slider) are placed, as foreignObjects, shown at the center of an SVG circle. The foreignObjects can be zoomed in/out via the mousewheel. Adjust the slider to change the text element values.
Scenerio:
The input text element and input range element(slider) are placed in an SVG <g> element, which is initially transformed to a scale = 0.5. Zoom in the <g> element. Adjust the slider and read the value placed in the input text element. Zoom is controlled by D3, version 4.

SVG Source:
Javascript:
OK in: EDGE/CH41/FF35