HTML Id is not findable for dcc.Slider

Dash Python
1

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).

53 PM
Screen Shot 2017-07-30 at 6.44.53 PM.png956×376 26.1 KB

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
2

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).

3

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