Track Color in input type Range in react - reactjs

Question

I have the next input type range in react:
inputElement = <div className={styles.InputElementRange}>
<input
min={props.min}
max={props.min}
value={props.value}
onChange={props.changed}
></input>
<input
type="text"
value={props.value}
onChange={props.changed}
style={props.stylesElement}
/>
</div>
and I got this:
The input type range works very well but I couldn't change the styles of the track.
How can I change the blue color by default? I want to replace the blue color for orange color.
Thanks in advance.

Answer 1

See this link to see how you can style the HTML slider

Answer 2

I found a solution:
inputElement = <div className={styles.InputElementRange}>
<input
min={props.min}
max={props.min}
value={props.value}
onChange={props.changed}
style={{'background': `linear-gradient(to right, orange ${(parseInt(props.value)-props.min)*100/(props.max-props.min)}%, #ccc 0px`}}
></input>
<input
type="text"
value={props.value}
onChange={props.changed}
style={props.stylesElement}
/>
</div>
and these are the styles:
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 10px;
margin-right: 10px;
border-radius: 6px;
outline: 0;
background: #ccc;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 18px;
width: 18px;
border-radius: 3px;
background: orange;
border-radius: 50%;
border: 0;
cursor: pointer;
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
height: 18px;
width: 18px;
border-radius: 3px;
background: orange;
border: 0;
border-radius: 50%;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
height: 18px;
width: 18px;
border-radius: 3px;
background: orange;
border-radius: 50%;
border: 0;
cursor: pointer;
}
I thought my answer based in this answer: Ver link

Answer 3

Here's an easy one pretty straight forward.
Note that I'm using styled components but you can use the same with vanilla css or sass as well
import React, { useState } from 'react'
import styled from 'styled-components'
export const Slider = () => {
const [bgSize, setBgSize] = useState(0)
const handleSlide = (e) => {
setBgSize(e.target.value)
}
return (
<SliderContainer>
<ColorSlider
onChange={(e) => {
handleSlide(e)
}}
bgSize={bgSize}
min={0}
max={100}
type={'range'}
/>
</SliderContainer>
)
}
export const SliderContainer = styled.div``
export const ColorSlider = styled.input`
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
background-image: linear-gradient(#ff4500, #ff4500);
background-size: ${({ bgSize }) => bgSize}% 100%;
background-repeat: no-repeat;
border: 1px solid;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -0.5em;
// position: relative;
appearance: none;
height: 25px;
width: 25px;
border: 1px solid black;
background: #4d4945;
border-radius: 100%;
cursor: pointer;
border: 1px solid black;
}
&::-webkit-slider-runnable-track {
-webkit-appearance: none;
appearance: none;
width: 100%;
max-width: 500px;
outline: none;
height: 10px;
border-radius: 10px;
background-image: transparent;
}
`