User text entry for plotly.js

I have plotly.js as an element of a row of a container all built with bootstrap. All looked great… except. I now want to have a slider to go between two numeric values and then update the graph. Also working just fine… EXCEPT. The slider needs to know max/min values.

I can write a new row below the plotly graph, and create spaces for html <input…> and ask the user to type a number into those boxes and trigger an event when those numbers change, which then sets the max/min values on the slider, updates the text next to those sliders to write these new max/min values and all working fine… EXCEPT. It looks cheesy.

Is there a plotly.js widget that I could position on the plotly graph itself and allow it to have user text input rather than going to a new line and using html?

At the moment I’m heading down the road of trying to work out the position in html of the input boxes and get them to be in just the right spot, above the slider superimposed on top of the plotly graph, but it feels like I must be doing something wrong.

Any advice?

This is what I have at the moment (work in progress). I use CSS to force the input boxes to overlay the graph.