plotly / dash-daq

Control components for Dash
MIT License
141 stars 40 forks source link

daq.Slider is not correctly styled unless there is a dash_core_components component in the app. #81

Closed shammamah-zz closed 4 years ago

shammamah-zz commented 4 years ago

The rc-slider stylesheet is part of the dash-core-components library, and consequently does not get loaded if dcc is not in the app. This leads to an unstyled slider:

import dash
import dash_daq as daq
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    daq.Slider(
        id='my-daq-slider-ex',
        value=17
    ),
    html.Div(id='slider-output'),
])

@app.callback(
    dash.dependencies.Output('slider-output', 'children'),
    [dash.dependencies.Input('my-daq-slider-ex', 'value')])
def update_output(value):
    return 'The slider is currently at {}.'.format(value)

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

Screen Shot 2020-01-17 at 11 17 20 AM

import dash
import dash_daq as daq
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    daq.Slider(
        id='my-daq-slider-ex',
        value=17
    ),
    html.Div(id='slider-output'),
    dcc.Input()
])

@app.callback(
    dash.dependencies.Output('slider-output', 'children'),
    [dash.dependencies.Input('my-daq-slider-ex', 'value')])
def update_output(value):
    return 'The slider is currently at {}.'.format(value)

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

Screen Shot 2020-01-17 at 11 17 04 AM

leo-smi commented 4 years ago

Thank you, the second dcc worked fine!