Question: 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) 

Answer: 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; }