How to change the text color of a range slider

Dash Python
1

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!

2

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
3

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?

4

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
5

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

1 Like
6

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

7

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?

8

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