How to change the text color of a range slider

Dear all,

I would like to create a rangeslider for user to define hour range… Something as follow:

dcc.RangeSlider(
id=‘hour_slider’,
count=1,
min=0,
max=23,
step=1,
value=[0, 23],
marks={str(h) : str(h) for h in range(0, 24)},

                                                            ),

Now it looks like:
hour

Is it possible to change the text color of the marks?
My dashboard is dark-themed. Hours are expected to be shown in lighter color if selected. Is it a way to customize the text color of selected and un-selected marks?

Does anyone know? Thanks a lot!

Hello,
instead of assigning str(h) to your marks dict, you should assign another dict containing a label and a style entries. So for example, instead of

you would have

marks={str(h) : {'label' : str(h), 'style':{'color':the_color_you_want} for h in range(0, 24)},

To change the color of the selected ones you can change the style dict of the marks through a callback function

4 Likes

I can change the text color. Thanks @Bachibouzouk. :grinning:
(I added one more closing curly brace to make sure it works.)

marks={str(h) : {'label' : str(h), 'style':{'color':the_color_you_want}} for h in range(0, 24)},

But I am not really sure how to change the color of the selected ones with a callback function. I can still only change the color for all text, but not the selected ones even through a callback. How to define the color of selected and non-selected ones separately?

The prop value contains the information you need to change the selected marks style :slight_smile:

@app.callback(
    Output('hour_slider', 'marks'),
    [Input('hour_slider', 'value')],
    [State('hour_slider', 'marks')]
)
def update_marks(vals, marks):
    print(vals)
    for k in marks:
        if int(k) >= vals[0] and int(k) <= vals[1]:
            marks[k]['style']['color'] = 'blue'
        else:
            marks[k]['style']['color'] = 'red'

    return marks

If you want the makers to update while you drag the slider, you need to set its prop updatemode to 'drag'

2 Likes

I tested and it works like a charm. Thanks again @Bachibouzouk

1 Like

@Bachibouzouk thanks for sharing! This helped me a lot :slight_smile:

he markers of the slider go back to default color after a callback.
The call back actually selects different data sets. how to maintain the color of the markers through the callbacks too?

This helped me too. Thanks. But the color reverted back to default after a callback update. Any suggestions?