How can I change the colour of the slider button

Dashboard
1

Currently I am using this in my style template to change the colour of my slider buttons (and size)

This works well but works on all slider buttons. Now I want to control my RGBW led strips. So I want a slider for red, with a red button, a slider for green with a green button etc.
Is that possible and how ?

This is what I use in my style template:

.nr-dashboard-theme .nr-dashboard-slider .md-track-fill {
background-color: #fbfa0b;
}

.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {
background-color: #fbfa0b;
border-color: #fbfa0b;
height: 22px;
width: 22px;
}

which gives this result

NR Dimmer

2

If you are running Node-red v3 you can give ui controls a class, eg "red", "blue", "green"

Then the css will be something like

.green .nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {
background-color: green;
}

Note that the custom class is applied to the md-card which contains the dashboard slider, not the slider itself.

It often takes some jiggling with the browser's css inspector to get the exact selector.

3

I am running Node Red v3. I did find the selector via Chromes css inspector and a lot of trial and error.

I know I can set a class in the style template (not sure how yet), but would that enable me (and how) to have 3 sliders with different colours each ?

4

Untitled 1
Untitled 1600Ă—829 41.5 KB

5

Here you are.

[{"id":"56658942d3800e53","type":"ui_slider","z":"88085c2cbfdc52d0","name":"","label":"slider (red)","tooltip":"","group":"9656770e6129dfa3","order":1,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"className":"red-slider","x":510,"y":1970,"wires":[[]]},{"id":"4e649f2156374282","type":"ui_slider","z":"88085c2cbfdc52d0","name":"","label":"slider (blue)","tooltip":"","group":"9656770e6129dfa3","order":1,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"className":"blue-slider","x":510,"y":2020,"wires":[[]]},{"id":"ccc785a8ba4a3e2a","type":"ui_template","z":"88085c2cbfdc52d0","group":"9656770e6129dfa3","name":"CSS","order":3,"width":0,"height":0,"format":"<style>\n    .red-slider * .md-thumb:after {\n        background-color: IndianRed !important;\n        border-color: IndianRed !important;\n    }\n    .red-slider * .md-focus-ring {\n        background-color: IndianRed !important;\n        opacity: 0.2 !important; \n        \n       \n    }\n    .blue-slider * .md-thumb:after {\n        background-color: LightSkyBlue !important;\n        border-color: LightSkyBlue !important;\n    }\n    .blue-slider * .md-focus-ring {\n        background-color: LightSkyBlue !important;\n        opacity: 0.2 !important       \n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":490,"y":2080,"wires":[[]]},{"id":"9656770e6129dfa3","type":"ui_group","name":"Default","tab":"1fef7b435affdeb3","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"1fef7b435affdeb3","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

image

1 Like
6

Thats it !!! Great. I just started adapting. One thing I noticed. I tried to change the font size of the button (thumb ?) slightly in my approach. I added that but the size doesnt change.
I have seen this a few times and always wondered what it is, at the end of the line !important

.red-slider * .md-thumb:after {
background-color: Red !important;
border-color: Red !important;
height: 28px;
width: 28px;
}

I think that look quite nice to control my RGBW leds

NR RGBW

7

The !important flag gives highest importance to that property. Means that if some class tries to manipulate same property, it can nt. (Unless it also has the !important flag set)

Your custom CSS is not always the last thing added to the styles (most latest has effect). But there is more things like Specificity which all make the CSS rules to have prioritized behavior.

To make the thumb bigger, add one more class to your sliders like this:
image

And write the CSS rule:

.big-thumb * .md-thumb{
    transform: scale(.9) !important;
}

Note that if some group of elements carry same styles, you make one CSS rule and apply it where ever is needed. No need to create rules which must affect many elements for red-slider and blue-slider separately.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.