JSX React HTML5 Input Slider Doesn't Work

Question

I\'m using React.JS for a build, and am building a range input slider with two choices for a component.

this is my code:

Answer 1

User interactions have no effect because an 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 (
    
  );
}

You can also use defaultValue instead of value. In this case 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