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.

Answer 1

Solution to make every range input on the page to color based on user input.

Copy the script below to a <script></script> tag (or to an external .js file and then include it):

<script language="Javascript">
/*
 * convert the given #rrggbb HTML color to an "rgb object".
 *
 * A RGB_OBJECT is something line {r:0, b:0, g:0}, where 'r', 'g' and 'b'
 * could be any integer in the range 0-255.
 *
 * @param objColor : string (#rrggbb format)
 * @return RGB_OBJECT
 */
function strColorToObjColor(strColor) {
    strColor=(""+strColor+"").trim().toUpperCase();
    if (/^#[0-9A-F]{6}$/.test(strColor)) {
        return ({
            r: (parseInt('0x'+strColor.substring(1,3), 16)),
            g: (parseInt('0x'+strColor.substring(3,5), 16)),
            b: (parseInt('0x'+strColor.substring(5,7), 16))
        });
    }
    if (/^#[0-9A-F]{3}$/.test(strColor)) {
        return ({
            r: (parseInt('0x'+strColor.charAt(1)+'0', 16)),
            g: (parseInt('0x'+strColor.charAt(2)+'0', 16)),
            b: (parseInt('0x'+strColor.charAt(3)+'0', 16))
        });
    }
    return {r:0, g:0, b:0};
}

/*
 * convert an RGB_OBJECT to a string color
 * in html format #rrggbb
 *
 * @param objColor : RGB_OBJECT
 * @return string
 */
function objColorToStrColor(objColor) {
    let r = objColor.r.toString(16),
        g = objColor.g.toString(16),
        b = objColor.b.toString(16);
    return '#' + (r.length<2 ? ''+'0'+r : r) + (g.length<2 ? ''+'0'+g : g) + (b.length<2 ? ''+'0'+b : b);
}

/*
 * calculates the color at the percentage
 * in the gradiante between the given colors
 * obs.: colors must be given in RGB_OBJECT format
 *
 * @param color1 : RGB_OBJECT
 * @param color2 : RGB_OBJECT
 * @param percentage : double (between 0.0 and 1.1 inclusive)
 * @return RGB_OBJECT
 */
function calculate(first, second, percentage) {
    let result = {};
    Object.keys(first).forEach((key) => {
        let start = first[key];
        let end = second[key];
        let offset = (start - end) * percentage;
        if(offset >= 0) {
            Math.abs(offset); 
        }
        result[key] = Math.floor(start - offset);
    });
    return result;
}

/*
 * does the same function above,
 * plus accepting #rrggbb html color strings as parameters
 * and giving back the result in #rrggbb format too
 *
 * @param color1 : string (#rrggbb format)
 * @param color2 : string (#rrggbb format)
 * @param percentage : double (between 0.0 and 1.1 inclusive)
 * @return string
 */
function calculateGradientPoint(color1, color2, percentage) {
    return objColorToStrColor(
        calculate(
            strColorToObjColor(color1),
            strColorToObjColor(color2),
            percentage
        )
    );
}

/*
 * Set the color of the given CSS property
 * according to the input current value.
 * Supported properties: color, background-color, border-color,
 *   border-left-color, border-top-color, border-right-color
 *   and border-bottom-color. Defaults to background-color.
 *
 * @param rangeControl : HTMLInputElement [type=range]
 * @param targetCssProperty : string
 * @return string
 */
function setToneOf(rangeControl, targetCssProperty) {
    const SUPPORTED_PROPERTIES = {
        color: 'color',
        backgroundColor: 'background-color',
        borderColor: 'border-color',
        borderBottomColor: 'border-bottom-color',
        borderLeftColor: 'border-left-color',
        borderRightColor: 'border-right-color',
        borderTopColor: 'border-top-color'
    };
    //
    let element = $(rangeControl).get(0),
        value = $(rangeControl).val(),
        min = $(rangeControl).attr('min'),
        max = $(rangeControl).attr('max'),
        left = $(rangeControl).attr('data-leftcolor'),
        middle = $(rangeControl).attr('data-middlecolor'),
        right = $(rangeControl).attr('data-rightcolor'),
        property = (targetCssProperty ? targetCssProperty : 'background-color');
    let first = middle,
        second = middle,
        color = middle,
        percentage = 0.0;
    //
    if (value > 0) {
        first = middle;
        second = right;
        percentage = value / (max * 1.0);
    } else if (value < 0) {
        first = left;
        second = middle;
        percentage = 1 - (value / (min * 1.0));
    }
    //
    color = calculateGradientPoint(first, second, percentage);
    //
    for (let k in SUPPORTED_PROPERTIES) {
        if ((property == k) || (property == SUPPORTED_PROPERTIES[k])) {
            element.style[k] = color;
            break;
        }
    }
}
</script>

Add the toned-range class to your <input type="range">

<input type="range" class="toned-range">

Add the data-leftcolor, data-middlecolor and data-rightcolor properties to the input

<input type="range" class="toned-range" data-leftcolor="#FF0000" data-middlecolor="#FFFFFF" data-rightcolor="#006600">

To make it work, you can either use jQuery...

<script language="Javascript">
$(document).ready(function(){
    $('input.toned-range').on('input', function(){
        setToneOf(this);
    });
});
</script>

...or this just plain Javascript at the very end of the page (right before </BODY> or </HTML>):

<script language="Javascript">
(function init() {
    let tonedRanges = document.getElementsByClassName("toned-range");

    for (let i=0, count=tonedRanges.length; i<count; i++) {
        tonedRanges[i].addEventListener("input", function(){
            setToneOf(this);
        });
    }
})();
</script>

...or even resort to inline events:

<input type="range" oninput="setToneOf(this);" class="toned-range" data-leftcolor="#FF0000" data-middlecolor="#FFFFFF" data-rightcolor="#006600">

If your range input gets a value from database, server-side scripting or elsewhere, you'll need to initialize it, too. You can either do with plain Javascript (at very end of the page)...

<script language="Javascript">
(function init() {
    let tonedRanges = document.getElementsByClassName("toned-range");

    for (let i=0, count=tonedRanges.length; i<count; i++) {
        setToneOf(tonedRanges[i]);
        tonedRanges[i].addEventListener("input", function(){
            setToneOf(this);
        });
    }
})();
</script>

...or with jQuery:

<script language="Javascript">
$(document).ready(function(){
    $('input.toned-range').on('input', function(){
        setToneOf(this);
    });
    $('input.toned-range').each(function(){
        setToneOf(this);
    });
});
</script>

Answer 2

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;
}

Answer 3

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

Answer 4

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>

Answer 5

// .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>

Answer 6

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/