javascript - Gutenberg RangeControl

I'm trying to use the RangeControl component. This is what I'm doing:

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

this works Ok, but If I specify a different variable in the value parameter (and setup my attribute through the onChange event, instead), then the component stops working (actually, the onChange event is fired, but the component doesn't render correctly moving the current value indicator).

var my_variable = 1;

el(
    RangeControl,
    {
        label: 'Columns',
        value: my_variable,
        initialPosition: 1,
        min: 0,
        max: 3,
        onChange: function( val ) {
            my_variable = val;
        }
    }
),

Is there something I'm missing here? Is this the intended behavior, or have I accidentally discovered a bug in the component?

Thank you!

I'm trying to use the RangeControl component. This is what I'm doing:

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

this works Ok, but If I specify a different variable in the value parameter (and setup my attribute through the onChange event, instead), then the component stops working (actually, the onChange event is fired, but the component doesn't render correctly moving the current value indicator).

var my_variable = 1;

el(
    RangeControl,
    {
        label: 'Columns',
        value: my_variable,
        initialPosition: 1,
        min: 0,
        max: 3,
        onChange: function( val ) {
            my_variable = val;
        }
    }
),

Is there something I'm missing here? Is this the intended behavior, or have I accidentally discovered a bug in the component?

Thank you!

• javascript
• block-editor

Share Improve this question edited Jan 7, 2019 at 13:52 Andrea asked Jan 7, 2019 at 13:31 AndreaAndrea 2355 bronze badges 2

• What do you mean If I specify a different variable in the value parameter? Could you share the code? – Alvaro Commented Jan 7, 2019 at 13:32
• @Alvaro, I've updated my original post – Andrea Commented Jan 7, 2019 at 13:38

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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 } = wppose;
const { Component } = wp.element;
const { RangeControl } = wpponents;

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);