0

I tried to use the RangeControl component outside and in the block editor itself. But it looks like there are styles missing, and it does not work properly.

enter image description here

Is there a trick to use it in the block in Gutenberg somehow?

export default function Edit( { attributes, setAttributes } ) {

const blockProps = useBlockProps();

const MyRangeControl = () => {
    const [ columns, setColumns ] = useState( 2 );
 
    return(
        <RangeControl
            label="Rating"
            value={ attributes.value }
            onChange={ onChangeValue }
            min={ 1 }
            max={ 10 }
            step={ 0.5 } 
        />
    );
};

return (
    <p { ...blockProps }>
    <MyRangeControl/>
    </p>
);

}

EDIT: It works if I add it like this, but it does not save the value:

export default function Edit( { attributes, setAttributes } ) {

    const blockProps = useBlockProps();

    const onChangeValue = ( newValue ) => {
        setAttributes( { value: newValue} )
    }


    return (
        <p { ...blockProps }>
        <RangeControl
                label="Rating"
                value={ attributes.value }
                onChange={ onChangeValue }
                min={ 1 }
                max={ 10 }
                step={ 0.5 } 
            />
        </p>
    );
} 

1 Answer 1

3

This happens because the Component need the correct data type. Use "number" when getting the value. Use "String" as the attributes type.

const onChangeValue = ( newValue ) => {
        setAttributes( { value: String(newValue)} )
    }

<RangeControl
 label="Rating"
 value={ Number(attributes.value) }
 onChange={ onChangeValue }
 min={ 1 }
 max={ 10 }
 step={ 0.5 } 
/>
        

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.