I am using the input type range bar in my code and would like to change the colour. I don't want to change anything else about it, I just want to change the colour from blue to something else.
I know that I can access it through css like so:
input[type=range] {
-webkit-appearance: none;
}
But this alters the input range, I just want to change the color.
As far as I understand, you can not change color of just one part and leave everything else as is. Furthermore, in different browsers parts of the slider are different (they are rendered differently, and their internals differ).
Check out this tool: https://toughengineer.github.io/demo/slider-styler
It allows to relatively easily style <input> range slider and generates cross browser CSS for you.
Here's a great article about how <input> range element works and how you can style its individual parts in different browsers:
https://css-tricks.com/sliding-nightmare-understanding-range-input/