# Change colour of dot on slider

**URL:** <https://discourse.nodered.org/t/change-colour-of-dot-on-slider/84243>\
**Category:** Dashboard\
**Created:** [3 January 2024 09:07 UTC](https://discourse.nodered.org/t/change-colour-of-dot-on-slider/84243 "2024-01-03T09:07:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [3 January 2024 09:07 UTC](https://discourse.nodered.org/t/change-colour-of-dot-on-slider/84243/1 "2024-01-03T09:07:01Z")

</div>

Hello

Can someone please tell me which property I need to change to make the dot on the slider a custom colour (say white)?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e1f6c56afed81364aad220b52915640ad1d2ca76.png)

I have found all of these in the page inspect, but not sure which one does the dot when it is not being moved?

I need to overwrite my default dashboard colours.

> /\* Slider \*/  
> .nr-dashboard-theme .nr-dashboard-slider .md-track {  
> background-color: rgba(111, 111, 111, 0.5);  
> }
> 
> .nr-dashboard-theme .nr-dashboard-slider .md-sign:after {  
> border-top-color: #1e1e1e !important;  
> }  
> .nr-dashboard-theme .nr-dashboard-slider .md-min[md-discrete] .md-sign {  
> background-color: #1e1e1e;  
> }  
> .nr-dashboard-theme .nr-dashboard-slider md-slider[md-discrete] .md-sign,  
> .nr-dashboard-theme .nr-dashboard-slider md-slider[md-discrete] .md-sign:after {  
> opacity: 1;  
> -webkit-transform: translate3d(0, 0, 0) scale(1);  
> transform: translate3d(0, 0, 0) scale(1);  
> }
> 
> .nr-dashboard-theme md-slider.md-default-theme[md-vertical] .md-sign:after,  
> .nr-dashboard-theme md-slider[md-vertical] .md-sign:after {  
> content: none;  
> }  
> .nr-dashboard-theme .nr-dashboard-slider md-slider.md-default-theme.md-min[md-discrete] .md-thumb:after,
> 
> .nr-dashboard-theme .nr-dashboard-slider md-slider .md-track-ticks {  
> color: transparent;  
> }  
> .nr-dashboard-theme .nr-dashboard-slider md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-focus-ring {  
> transform: scale(0.4);  
> animation: unset;  
> }  
> .nr-dashboard-theme .nr-dashboard-slider .md-thumb-text {  
> color: white;  
> filter: invert(0%);  
> }

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [3 January 2024 09:23 UTC](https://discourse.nodered.org/t/change-colour-of-dot-on-slider/84243/2 "2024-01-03T09:23:38Z")

</div>

Take a look at [How can I change the colour of the slider button](https://discourse.nodered.org/t/how-can-i-change-the-colour-of-the-slider-button/70646)

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [3 January 2024 09:33 UTC](https://discourse.nodered.org/t/change-colour-of-dot-on-slider/84243/3 "2024-01-03T09:33:29Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [2 February 2024 09:34 UTC](https://discourse.nodered.org/t/change-colour-of-dot-on-slider/84243/4 "2024-02-02T09:34:01Z")

</div>

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