Black Lives Matter. Please consider donating to Black Girls Code today.

Range slider to fit plot width / xaxis length

Hi guys,

Basically I want to add multiple vertical rules on a plot, and move them using a separate range slider. I know there’s the spikelines feature, but I want it more custom and permanent lines overlaying the plot.

This should be easy enough to do. The only issue I’m having, is I don’t know how to automatically change the slider width to fit the width of the plot.

Currently I can use some css within the style block of the Div element (‘width’, ‘margin-left’, ‘margin-right’). But when I resize the browser, it’s not fluid and doesn’t fit the width perfectly anymore.

Does anyone know how to change the css automatically?

I guess basically my question is, how do I get the length of the xaxis of the plot in pixels, and set that (with padding) to the range slider.

When adding a range slider within the xaxis attribute of a plot, the width of the range slider fits the plot.

When adding a range slider as a separate element within the same div, the range slider spans the div element (which makes sense as the default option).