Change color of range slider dot

Topic: Change color of range slider dot

ducksuite pro asked 5 years ago

Hello,

I am using the range slider for Angular, and I am trying to change the color of the blue dot that you drag with the mouse. How can I do that?

Kind regards,

Daniel Petersen

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

Dear @worksonline

Please take a look at the below scss code. This should answer your question.

.range-cloud {
background-color: red !important;
&:after {
border-top-color: red !important; 
}
}

.range-field input[type="range"] {
&::-webkit-slider-thumb {
background: green !important;
}
&::-moz-range-thumb {
background: green !important;
}
&::-ms-thumb {
background: green !important;
}
}

Best Regards,

Damian

anuragd7 free commented 4 years ago

Could you share the corresponding html code so I can see where the classes are applied? Thanks

Arkadiusz Idzikowski staff commented 4 years ago

This code is for the material slider example from our documentation. These classes are applied to components internal code, you can check the structure of the component by inspecting it in your developer tools.

<mdb-range-input id="range" min="0" max="100"></mdb-range-input>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.0.2
Device: Desktop
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

ducksuite

Pro User 20Support score
4Questions 2Answers 0Snippets