How do I change background for the thumb with styled components? - css

Question

I'm trying to change the background color for the thumb with styled-components for react, but I do not know how, cant seem to get it. My styled-components look like this:
const InputVolume = styled.input`
::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background-color: #FFFFFF;
border-radius: 25px;
border: 0px solid #000101;
};
&:focus::-webkit-slider-runnable-track {
background: #D78E91;
};
::-webkit-slider-thumb {
background-color: #FFFFFF;
}
`;

Answer 1

Word of warning: the MDN docs recommend against using this in production.
It looks like you're just missing setting some appearance: none properties and then adding a few more to specify things like height and width. Here is a working example of the snippet below.
Also, it looks like you have some typos in your styles. You've got a border set to 0px, same with your box shadow, and a border radius that only needs to be 2px, not 25px (based on the height and what I'm assuming you're trying to do with it).
const InputVolume = styled.input`
appearance: none;
cursor: pointer;
::-webkit-slider-runnable-track {
height: 4px;
width: 100%;
cursor: pointer;
pointer-events: none;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background-color: #fff;
border-radius: 2px;
border: 1px solid #000101;
}
&:focus {
outline: none;
}
&:focus::-webkit-slider-runnable-track {
background: #d78e91;
}
&::-webkit-slider-thumb {
height: 16px;
width: 16px;
appearance: none;
background: #fff;
border-radius: 8px;
margin-top: -6px;
border: 1px solid #777;
}
`;