Dash range slider with input on each side

Question

I am quite new to front-end development and HTML and I'm struggling to understand
how to order a range slider with two inputs in the same line when using Dash

I have tried to separate the html.Div,
Putting the components in the same Div without separating them
adjust the different parameters and some more
but I still can't get it to appear the way I want

what I want:

what I have:

My code (that reproduce what I have):

import dash
import dash_core_components as dcc
import dash_html_components as html

app.layout = html.Div([
    html.Div([
        html.Div([dcc.Input(
            id='slider-min-value',
            placeholder=str(min_value))],
            style={'width': '10%'}
        ),
        html.Div([dcc.RangeSlider(
            id='condition-range-slider',
            min=0,
            max=30,
            value=[10, 15],
            allowCross=False)],
            style={'width': '25%'}
        ),
        html.Div([dcc.Input(
            id='slider-max-value',
            placeholder=str(max_value))],
            style={'width': '10%'}
        ),
        ],
        style={'display': 'inline-block'})])

if __name__ == '__main__':
    app.run_server(debug=True)

what do I need to do in order to get the rangeslider and the inputs to appear the way I want?

Does this answer your question? [How to float 3 divs side by side using CSS?](https://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css) — amain, May 19 '20 at 17:03

score 3 · Accepted Answer · answered May 20 '20 at 07:53

Ok, using {"display": "grid", "grid-template-columns": "10% 40% 10%"} gave me what I wanted.
layout:

app.layout = html.Div(
    html.Div(
        [
            dcc.Input(type='text', value=min_value),
            dcc.RangeSlider(
                id='condition-range-slider',
                min=0,
                max=30,
                value=[10, 15],
                allowCross=False
            ),
            dcc.Input(type='text', value=max_value)
        ],
        style={"display": "grid", "grid-template-columns": "10% 40% 10%"}),
    style={'width': '20%'}
)

what I got:

score 1 · Answer 2 · answered May 19 '20 at 20:51

You can try updating the html.Div style with 'float': 'left',

import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.Div(
            style={'width':'10%', 'float':'left', 'marginLeft': 20, 'marginRight': 20},
            children=[
                dcc.Input(id='slider-min-value')
            ]
        ),
        html.Div(
            style={'width':'50%', 'float':'left','marginLeft': 20, 'marginRight': 20},
            children=[
                dcc.RangeSlider(
                    id='condition-range-slider',
                    min=0,
                    max=30,
                    value=[10, 15],
                    allowCross=False
                )
            ]
        ),
        html.Div(
            style={'width':'10%', 'float':'left','marginLeft': 20, 'marginRight': 20},
            children=[
                dcc.Input(id='slider-max-value')
            ]
        ),


    ])

if __name__ == '__main__':
    app.run_server(debug=True)

Thank you for your answer, this is very close to what I want. I need the inputs and range slider to be smaller (like in the picture I added in my question). I tried to play with the ```width``` property but although the range slider size varies, the input component remains the same. any ideas? — ItamarG, May 20 '20 at 05:22

Dash range slider with input on each side

2 Answers2