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)