How to rotate labels on rangeslider?

Dash Python
1

I’ve tried passing marks argument as implied here, e.g.

0: {'label': 'pumpkin', 'style': {'rotation': '45deg'}}

but it is not working. Any suggestions? Also, would be good if someone can link me exhaustive list of attributes that can go into style.

2

@thinkto - style is a dictionary of CSS key-value pairs, with their keys in camelCase instead of hyphen-case (i.e. paddingTop instead of padding-top). I recommend using the browser’s inspect element dev tools (see [Solved] Dash layout not working as expected + General Debugging Tips - #4 by chriddyp and View and change CSS  |  DevTools  |  Chrome for Developers) to modify the styles.

For rotation, see rotate() - CSS: Cascading Style Sheets | MDN

2 Likes
3

@chriddyp Didn’ think to use "style": {"transform": "rotate(45deg)"} - worked like a charm. Thanks!

2 Likes
4

Add this css rule:

.rc-slider-mark-text {
    transform: rotate(-45deg);

    /* Legacy vendor prefixes that you probably don't need... */

    /* Safari */
    -webkit-transform: rotate(-45deg);

    /* Firefox */
    -moz-transform: rotate(-45deg);

    /* IE */
    -ms-transform: rotate(-45deg);

    /* Opera */
    -o-transform: rotate(-45deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}