JSX React HTML5 Input Slider Doesn't Work
User interactions have no effect because an <input>
with value
prop is considered as controlled. It means that displayed value is controlled entirely by render
function. So to actually update input value you should use the onChange
event. Example:
getInitialState: function() {
return {value: 3};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (
<input
id="typeinp"
type="range"
min="0" max="5"
value={this.state.value}
onChange={this.handleChange}
step="1"/>
);
}
You can also use defaultValue
instead of value
. In this case <input>
is considered as uncontrolled and any user interactions are immediately reflected by element itself without invoking render
function of your component.
More on this in official documentation
I think previous answers fix your problem. However, I'd say the solution doesn't need to involve React states.
The only reason behind your frozen input slider is that you've hardcoded its value to 3, as @Colin Whitmarsh suggests.
Simply, this works:
<input id="typeinp" type="range" min="0" max="5" defaultValue="3" step="1"/>
Now, you probably need its output to do something. You can use onChange={this.handleChange}
as @xCrZx states in his answer. But inside handleChange
you don't necessarily have to update your state. Depending on your logic, you could avoid increasing the complexity of your state and simply code your logic inside handleChange
.
If you avoid updating the state, you'll probably save some renders and your performance will improve.
I hope the above solutions might have resolved your issue, I have one simple approach using hooks.
const RangeSlider = () => {
const [rangeval, setRangeval] = useState(null);
return (
<div>
<input type="range" className="custom-range" min="199" max="3999"
onChange={(event) => setRangeval(event.target.value)} />
<h4>The range value is {rangeval}</h4>
</div>
);
};
export default RangeSlider;