Gutenberg RangeControl

When using a control that modifies a block attribute, you need to set the value of the control to the value of the attribute and the onChange function needs to change the attribute using the setAttributes function:

el(
    RangeControl,
    {
        label: 'Columns',
        value: props.attributes.my_attribute,
        initialPosition: 1,
        min: 0,
        max: 3,
        onChange: function( val ) {
            props.setAttributes({ my_attribute: val })
        }
    }
),

The above example is linked to a block. The block attributes modify the component state. If you want to modify the state by your own, you could link it to the redux store. Or you could simply use the state of the component through the withState HOC. To do so you would need to wrap your component inside withState and use the props provided by it to update it.

const { withState } = wp.compose;
const { Component } = wp.element;
const { RangeControl } = wp.components;

class Range extends Component {
    render() {
        const { my_number, setState } = this.props;

        return (
            <RangeControl
                value={my_number}
                min={0}
                max={3}
                onChange={value => {
                    setState({ my_number: value });
                }}
            />
        );
    }
}

export default withState({ my_number: 1 })(Range);