Black Lives Matter. Please consider donating to Black Girls Code today.
📣 Webinar today at 2pm EDT! Operationalize COVID-19 Statistics with Dash and IQT. Reserve your spot!

HTML Id is not findable for dcc.Slider

Just playing around with the Dash tutorial examples, including the one on plotting GDP per capita vs Life Expectancy and making it interactive by year. A section of code defines the Slider element:

dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].min(),
        step=None,
        marks={str(year): str(year) for year in df['year'].unique()}
    )

However, when I try to find this element using Chrome’s DevTools, I can’t locate it (I was hoping to edit its CSS interactively).

This works perfectly fine when I search for the go.Scatter object’s id ‘graph-with-slider’. Is there a reason I can’t find the dcc.Slider object? How can I know which elements will have ids in the DOM and which won’t?

My versions:

dash==0.17.7
dash-core-components==0.8.0
dash-html-components==0.7.0
dash-renderer==0.7.4
plotly==2.0.12

That’s a good question. While IDs might not exist for every component, you should be able to set the className and set the style of the component that way. I don’t think that the underlying slider component that we’re using actually exposes the ID property (in the DOM).

Thanks for the quick reply! I’ll try using className