How to customize Input slider to make volume bar

Question

I'm trying to make volume bar with input slider with styled-components.

I could find many useful information but cannot find about how to customize valued area. For example, if I set volume as 80, default html input range color from 0 to 80 blue. I want to change this color but couldn't find any information about it. When I set -webkit-appearance: none; I could find it becomes transparent but I just want to change colors of it. (Not the background. I know I can do that with background).

edit) This is my code

const StyledTrackVolumeSlide = styled.input`
  width: 100%;
  // -webkit-appearance: none; I know this code will reset default css
  background: #555;
  height: 0.25em;
  outline: none;
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

I tried these properties, but could not find one with the blue valued background color. And also cannot find in chrome dev tools. Tried all the stuffs from here

&::-webkit-slider-thumb{
}

&:focus{

}

&::-ms-track{

}

Is there any possible way to customize input slider's valued color with plain CSS?

Answer 1

Check out this tool: https://toughengineer.github.io/demo/slider-styler

Among other things it allows to style progress indication.

To make the slider vertical you'll have to use CSS transform, though.

Here is an example:

 for (let e of document.querySelectorAll('input[type="range"].slider-progress')) { e.style.setProperty('--value', e.value); e.style.setProperty('--min', e.min == ''? '0': e.min); e.style.setProperty('--max', e.max == ''? '100': e.max); e.addEventListener('input', () => e.style.setProperty('--value', e.value)); }

 /*generated with Input range slider CSS style generator (version 20201223) https://toughengineer.github.io/demo/slider-styler*/ input[type=range].styled-slider { height: 2.2em; -webkit-appearance: none; } /*progress support*/ input[type=range].styled-slider.slider-progress { --range: calc(var(--max) - var(--min)); --ratio: calc((var(--value) - var(--min)) / var(--range)); --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em)); } input[type=range].styled-slider:focus { outline: none; } /*webkit*/ input[type=range].styled-slider::-webkit-slider-thumb { width: 2em; height: 2em; border-radius: 1em; background: #007cf8; border: none; box-shadow: 0 0 2px black; margin-top: calc(max((1em - 1px - 1px) * 0.5,0px) - 2em * 0.5); -webkit-appearance: none; } input[type=range].styled-slider::-webkit-slider-runnable-track { height: 1em; border-radius: 0.5em; background: #efefef; border: 1px solid #b2b2b2; box-shadow: none; } input[type=range].styled-slider::-webkit-slider-thumb:hover { background: #0061c3; } input[type=range].styled-slider:hover::-webkit-slider-runnable-track { background: #e5e5e5; border-color: #9a9a9a; } input[type=range].styled-slider::-webkit-slider-thumb:active { background: #2f98f9; } input[type=range].styled-slider:active::-webkit-slider-runnable-track { background: #f5f5f5; border-color: #c1c1c1; } input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track { background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef; } input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track { background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5; } input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track { background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5; } /*mozilla*/ input[type=range].styled-slider::-moz-range-thumb { width: 2em; height: 2em; border-radius: 1em; background: #007cf8; border: none; box-shadow: 0 0 2px black; } input[type=range].styled-slider::-moz-range-track { height: max(calc(1em - 1px - 1px),0px); border-radius: 0.5em; background: #efefef; border: 1px solid #b2b2b2; box-shadow: none; } input[type=range].styled-slider::-moz-range-thumb:hover { background: #0061c3; } input[type=range].styled-slider:hover::-moz-range-track { background: #e5e5e5; border-color: #9a9a9a; } input[type=range].styled-slider::-moz-range-thumb:active { background: #2f98f9; } input[type=range].styled-slider:active::-moz-range-track { background: #f5f5f5; border-color: #c1c1c1; } input[type=range].styled-slider.slider-progress::-moz-range-track { background: linear-gradient(#007cf8,#007cf8) 0/var(--sx) 100% no-repeat, #efefef; } input[type=range].styled-slider.slider-progress:hover::-moz-range-track { background: linear-gradient(#0061c3,#0061c3) 0/var(--sx) 100% no-repeat, #e5e5e5; } input[type=range].styled-slider.slider-progress:active::-moz-range-track { background: linear-gradient(#2f98f9,#2f98f9) 0/var(--sx) 100% no-repeat, #f5f5f5; } /*ms*/ input[type=range].styled-slider::-ms-fill-upper { background: transparent; border-color: transparent; } input[type=range].styled-slider::-ms-fill-lower { background: transparent; border-color: transparent; } input[type=range].styled-slider::-ms-thumb { width: 2em; height: 2em; border-radius: 1em; background: #007cf8; border: none; box-shadow: 0 0 2px black; margin-top: 0; box-sizing: border-box; } input[type=range].styled-slider::-ms-track { height: 1em; border-radius: 0.5em; background: #efefef; border: 1px solid #b2b2b2; box-shadow: none; box-sizing: border-box; } input[type=range].styled-slider::-ms-thumb:hover { background: #0061c3; } input[type=range].styled-slider:hover::-ms-track { background: #e5e5e5; border-color: #9a9a9a; } input[type=range].styled-slider::-ms-thumb:active { background: #2f98f9; } input[type=range].styled-slider:active::-ms-track { background: #f5f5f5; border-color: #c1c1c1; } input[type=range].styled-slider.slider-progress::-ms-fill-lower { height: max(calc(1em - 1px - 1px),0px); border-radius: 0.5em 0 0 0.5em; margin: -1px 0 -1px -1px; background: #007cf8; border: 1px solid #b2b2b2; border-right-width: 0; } input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower { background: #0061c3; border-color: #9a9a9a; } input[type=range].styled-slider.slider-progress:active::-ms-fill-lower { background: #2f98f9; border-color: #c1c1c1; }

 <input type="range" class="styled-slider slider-progress" style="width: 25em;" /> <br /> <,--this div is needed to cut off all that's not needed: you have to specify width explicitly--> <div style="display; inline-block: width. 2;2em: overflow; hidden:"> <;--this div catches the size of the child block--> <div style="display, inline-block:"> <;--this div sizes itself to the width of the <input> and makes itself square: also rotates contents--> <div style="display; inline-block: height; 0: padding; 0 0 100% 0: transform; rotate(-90deg);"> <!--style <input> as usual as if it is horizontal--> <input type="range" class="styled-slider slider-progress" style="width: 10em;" /> </div> </div> </div> more content to the right of the vertical slider

Answer 2

"default html input range color" doesn't exist, the element is rendered by your browser.

You must specify -webkit-appearance: none; (depends browser), for telling to the browser "don't design the input, I take care of that".
another tutorial

Sadly you must recreate input element, you can't just override color.