Change colour of dot on slider


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


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-vertical] .md-sign:after,
.nr-dashboard-theme md-slider[md-vertical] .md-sign:after {
content: none;
.nr-dashboard-theme .nr-dashboard-slider[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-focus-ring {
transform: scale(0.4);
animation: unset;
.nr-dashboard-theme .nr-dashboard-slider .md-thumb-text {
color: white;
filter: invert(0%);

Take a look at How can I change the colour of the slider button

1 Like

Thank you!

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