I have graph generated for showing HOS logs and is built using svg, line , rect etc. I have added some functionality in it when I mouse is hover on a log on svg the background highlights and when click on log on svg it shows log details. Now I added a range slider in it by using foreignobject in svg , the slider settled well and is confined within svg width and moving perfectly fine in it but because of that foreign object the hover and click events of mouse aren’t working on it, seems like there is layer on svg because of slider/ForeignObject which is blocking this thing.
I tried to put the slider on that svg by setting it’s position absolute but the position of slider get’s disturbed each time the svg is resized on different screen sizes.The whole code is in React js.