I have an Options component containing a slider input. I don't understand why the thumb of the slider doesn't move if I set the "value" parameter, but i need it.
Here the code:
const Options: React.FC<Props> = () => {
return (
<div className='options'>
<span className='boh'>CUSTOMIZE YOUR PASSWORD</span>
<div className='slider-container'>
<input type="range" id="slider" min="1" max="100" value='10' />
<label htmlFor="slider">Length</label>
</div>
</div>
)
}
export default Options
I thank anyone who gives me a hand
I solved it by replacing the "value" parameter with "defaultValue"
You set this up in such a way that your value will always be 10. If you want to be able to change that, you'll need to set the state in react to the initial value of 10, and also add the logic to be able to mutate that value. Here's one way to do this:
import { useState } from 'react'
const [value, changeValue] = useState(10)
return (
<input value={value} onChange={e => changeValue(e.target.value)} />
)