dcc.RangeSlider padding, inside a ddk.ControlItem

📊 Plotly Python
1

Hi,

I have a dcc.RangeSlider defined as below, I am struggling to adjust the padding.

dcc.RangeSlider(
            id='years-selector',
            min=min,
            max=max,
            step=1,
            marks={
                int(d[:4]) : d[:4] for d in dates
            },
            value=[min, max],
            persistence=True,
            persistence_type='session',
        )

Although the RangeSlider component doesn’t seem to accept a style property, Chrome’s inspector suggests that somehow the padding is defined somewhere for the div and class that shares a name with my rangeslider ‘id’.

<div id="years-selector" class="years-selector" style="padding: 0px 25px 25px;">

By the way, adding className='years-selector' to the component definition, and the following css in the asset folder didn’t seem to affect the div’s padding values above:

 .years-selector {
  padding-left:5 !important;
  padding-bottom: 5 !important;
  padding-right: 0;
  padding-top: 5 !important;
 }

Could anyone please suggest how to adjust the padding for a dcc.RangeSlider?

Thanks!

2

Hi,

Sometimes I have a similiar experience with dcc.Input() or dcc.Dropdown(). I usually wrap these components in html.Div() and apply the styling to these parent components. Could this work in your case?

3

Hi AIMPED,

Thanks a lot for your suggestion.

In my case, I am working with Dash Enterprise components and my dcc.RangeSlider is wrapped inside a ddk.ControlItem, which has it own ‘style’ property that applies only to its own div (from the Chrome inspector’s point of view).

Of course i could also wrap the dcc.RangeSlider inside a html.Div, but i am guessing there is a simpler way to deal with this. I am updating the title to reflect the fact that my question is quite specifically about a control item inside a ddk.ControlItem.

Thanks again!
David

4

@AIMPED Dash Design Kit (an enterprise component) works really similarly to html.Div. The DCC child of the DDK element will inherit all the styling.

In the solution you can see the styling is encapsulated by ddk.ControlCard and inherited by dcc.RangeSlide

        ddk.ControlCard(
            children=[
                dcc.RangeSlider(
                    min=10,
                    max=80,
                    marks={10 + i * 5: "{} dB".format(10 + i * 5) for i in range(15)},
                    value=[0, 60],
                )
            ],
            style={
                "padding-left": 5,
                "padding-right": 0,
                "padding-top": 5,
                "padding-bottom": 5,
            },
        ),
5

Eliza,
Thanks a lot for this. In my case, the styling applied to the ControlCard doesn’t seem to be inherited by the dcc.Rangeslider:

This is how the ddk.ControlCard is defined:

 ddk.ControlCard(
                children=[
                    geo_dd(),
                    years_slider(), # the RangeSlider itsel
                    reset_button(),
                ],
                width=25,
                style={
                    "padding-left": 5,
                    "padding-right": 0,
                    "padding-top": 5,
                    "padding-bottom": 5,
                },
            )

All control items that are children of the ddk.ControlCard appear to have paddings of 10 in all directions.

Here is the function that creates the RangeSlider is defined:

def years_slider():
    return ddk.ControlItem(
        dcc.RangeSlider(
            id='years-range',
            min=min,
            max=max,
            step=1,
            marks=marks,
            value=[min, max],
            persistence=True,
            persistence_type='session',
            className='years-selector'
        ),
        label='Select date range',
    )

adding the following to as a property of the ControlItem doesn’t change anything:

 style={
    "padding-left": 5,
    "padding-right": 0,
    "padding-top": 5,
    "padding-bottom": 5,
 },

Here is the css for the years-selector className:

.years-selector {
  padding-left: 5 !important;
  padding-bottom: 5 !important;
  padding-right: 0 !important;
  padding-top: 5 !important;
 }

from Chrome’s inspector, the ControlCard:

<div class="card--content controls vertical left" style="padding: 5px; flex-flow: column nowrap;">

And then my RangeSlider

<div id="years-range" class="years-selector" style="padding: 0px 25px 25px;">

The label of the ddk.ControlItem where the RangeSlider’s is located also appears to be computed with padding of 2 10 10 25 (t, l, r, b)

Any thoughts on why the styling doesn’t appear to be inherited by ControlItem and the RangeSlider?

Thank you!!