每侧都有输入的破折号范围滑块

Question

我对前端开发很陌生，HTML我很难理解
如何在使用 Dash 时在同一行中订购带有两个输入的范围滑块

我试过分开 html.Div,
将组件放在同一个 Div 而不分开它们
调整不同的参数等等
但我仍然无法让它以我想要的方式出现

我想要的：

我有什么：

我的代码（重现我所拥有的）：

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)

我需要做什么才能让 rangeslider 和输入以我想要的方式出现？

Answer 1

您可以尝试将 html.Div style 更新为 '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)

Answer 2

好的，使用 {"display": "grid", "grid-template-columns": "10% 40% 10%"} 给了我想要的东西。
布局：

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%'}
)

我得到了什么：

每侧都有输入的破折号范围滑块

Dash range slider with input on each side

python

html

css

plotly-dash

rangeslider