Change colour of input type range bar in css

Question

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.

[check out this issue](https://stackoverflow.com/a/38163892/11406735) This one might help you! — Sushan Sapaliga, Jul 16 '20 at 21:21

score 4 · Answer 1 · answered Apr 12 '23 at 13:45

just use accent-color css property to the input field and give any color to the field here I created 3 input range field with color red, green and blue but you can create any color range input with this. hope this answer is helpful

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.sliderRed{
   accent-color:red;
   }
   
 .sliderGreen{
   accent-color: green;
   }
   
 .sliderBlue{
   accent-color:blue;
   }
   </style>
</head>
<body>
    <div className="m-auto my-4 flex justify-between ">
  <input type="range" class="sliderRed" id="myRange"/>

  <input type="range" class="sliderGreen" id="myRange"/>

  <input type="range" class="sliderBlue" id="myRange"/>
  </div>
</body>
</html>

score 3 · Answer 2 · answered Dec 29 '20 at 23:33

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/

score 0 · Answer 3 · answered Jan 19 '23 at 09:03

// .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  var value = (this.value-this.min)/(this.max-this.min)*100
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};

#myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

<div class="chrome">
  <input id="myinput" min="0" max="60" type="range" value="30" />
</div>

score 0 · Answer 4 · answered Jun 19 '23 at 02:27

0

1. use DOM .style.accentColor property

     DOM_range_element.style.accentColor = 'blue'

2. use jquery .css()

  $('#DOM_range_element').css({'accent-color':'blue'})

or

  $('#DOM_range_element').css('accent-color', 'blue')

Here is my result

answered Jun 19 '23 at 02:27

hoogw

4,982
1
37
33

score 0 · Answer 5 · answered Jun 30 '23 at 20:45

Easy solutions on w3school, here is link

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

Change colour of input type range bar in css

5 Answers5

1. use DOM .style.accentColor property

2. use jquery .css()

or

Here is my result