How can the ticks be manipulated using dash mantine components? I've got a slider below, that alters the opacity of a bar graph. I know you can change the size and radius of the slider bar. But I want to change the fontsize, color of the xticks corresponding to the bar.
You could use the following css with dcc.sliders but is there a similar way to control dmc.sliders?
.rc-slider-mark-text {
font-size: 10px;
color: blue;
}
.rc-slider-mark-text-active {
font-size: 10px;
color: red;
}
I've tried to change the css file to no avail. Also, alter the fontsize or color in the style parameter has no affect.
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import plotly.express as px
import plotly.graph_objs as go
import pandas as pd
df = pd.DataFrame({
'Fruit': ['Apple','Banana','Orange','Kiwi','Lemon'],
'Value': [1,2,4,8,6],
})
external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
filter_box = html.Div(children=[
html.Div(children=[
dmc.Text("trans"),
dmc.Slider(id = 'bar_transp',
min = 0,
max = 1,
step = 0.1,
marks = [
{"value": 0, "label": "0"},
{"value": 0.2, "label": "0.2"},
{"value": 0.4, "label": "0.4"},
{"value": 0.6, "label": "0.6"},
{"value": 0.8, "label": "0.8"},
{"value": 1, "label": "1"},
],
value = 1,
size = 'lg',
style = {"font-size": 2, "color": "white"}, #doesn't work
),
], className = "vstack",
)
])
app.layout = dbc.Container([
dbc.Row([
dbc.Col(html.Div(filter_box),
),
dcc.Graph(id = 'type-chart'),
])
], fluid = True)
@app.callback(
Output('type-chart', 'figure'),
[
Input('bar_transp', 'value'),
])
def chart(bar_transp):
df_count = df.groupby(['Fruit'])['Value'].count().reset_index(name = 'counts')
df_count = df_count
type_fig = px.bar(x = df_count['Fruit'],
y = df_count['counts'],
color = df_count['Fruit'],
opacity = bar_transp,
)
return type_fig
if __name__ == '__main__':
app.run_server(debug = True)
According to the Styles API, you can use the static selector .mantine-Slider-markLabel to customize the tick labels, but it seems there is no selector for the active tick specifically, so you would have to use a clientside callback to apply a custom class, say mantine-Slider-markLabel-active, to the active element when the slider value changes.
NB. While Dash supports no output callbacks (as of v2.17.0), DMC currently doesn't, so we have to use a "dummy output" for the clientside callback, but instead of creating a specific component we can use an existing one since the callback prevents the update anyway by returning dash_clientside.no_update.
Note also that :
It's required that you wrap your app with a dmc.MantineProvider, else dash will complain.
Dash Mantine Components is based on REACT 18. You must set the env variable REACT_VERSION=18.2.0 before starting up the app.
from dash import Dash, dcc, html, _dash_renderer
from dash import callback, clientside_callback, Input, Output, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import plotly.express as px
import plotly.graph_objs as go
import pandas as pd
_dash_renderer._set_react_version('18.2.0')
df = pd.DataFrame({
'Fruit': ['Apple','Banana','Orange','Kiwi','Lemon'],
'Value': [1,2,4,8,6],
})
external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]
app = Dash(__name__, external_stylesheets = external_stylesheets)
filter_box = html.Div(children=[
html.Div(children=[
dmc.Text("trans"),
dmc.Slider(
id = 'bar_transp',
min = 0,
max = 1,
step = 0.1,
marks = [
{"value": 0, "label": "0"},
{"value": 0.2, "label": "0.2"},
{"value": 0.4, "label": "0.4"},
{"value": 0.6, "label": "0.6"},
{"value": 0.8, "label": "0.8"},
{"value": 1, "label": "1"},
],
value = 1,
size = 'lg',
),
], className = "vstack"
)
])
app.layout = dmc.MantineProvider(
dbc.Container([
dbc.Row([
dbc.Col(html.Div(filter_box)),
dcc.Graph(id = 'type-chart'),
html.Div(id='dummy-output'),
])
], fluid = True)
)
@callback(
Output('type-chart', 'figure'),
Input('bar_transp', 'value'))
def chart(bar_transp):
df_count = df.groupby(['Fruit'])['Value'].count().reset_index(name = 'counts')
df_count = df_count
type_fig = px.bar(
x = df_count['Fruit'],
y = df_count['counts'],
color = df_count['Fruit'],
opacity = bar_transp,
)
return type_fig
clientside_callback(
ClientsideFunction(
namespace='someApp',
function_name='onSliderChange'
),
Output('bar_transp', 'key'),
Input('bar_transp', 'value')
)
if __name__ == '__main__':
app.run_server(debug = True)
In your assets_folder (default 'assets') :
.js file :
window.dash_clientside = Object.assign({}, window.dash_clientside, {
someApp: {
onSliderChange(value) {
const activeCls = 'mantine-Slider-markLabel-active';
// Remove activeCls from the previously active mark if any.
document.querySelector('.' + activeCls)?.classList.remove(activeCls);
// And add it to the currently active mark
const labels = document.querySelectorAll('.mantine-Slider-markLabel');
const active = [...labels].find(label => +label.textContent === value);
active?.classList.add(activeCls);
// Prevent updating the ouput
return dash_clientside.no_update;
}
}
});
.css file :
.mantine-Slider-markLabel {
font-size: 10px;
color: blue;
}
.mantine-Slider-markLabel-active {
font-size: 10px;
color: red;
}