wordpress-gutenberg - RangeControl コンポーネントを小数点以下の範囲に設定できますか?

Question

私はグーテンベルクのヒーロー画像ブロックを構築しています (そして学習しながら学習しています)。私はそれに関するチュートリアルに従っていますが、これまでのところ問題なく動作しています。しかし、RangeControl コンポーネント (Gutenberg Editor Inspector Controls 内) を使用して、ヒーロー オーバーレイの不透明度を制御したいと考えています。これも機能しますが、範囲は整数 (つまり 1 から 10) でしか設定できません。代わりに小数を使用することは可能ですか (範囲は 0.0 から 1.0 になります)? もちろん、整数を使用して後で小数に変換することはできますが、それは最適な UX ではありません。

私は (非常に素晴らしい) create-guten-blockボイラープレートを使用しています。これがブロックのコードです (注: save() メソッドをまだ完了していないことは承知しています!):

block.js

registerBlockType('configit-blocks/hero', {
title: 'Hero Image',
icon: 'format-image',
category: 'common',
attributes: {
    textString: {
        type: 'array',
        source: 'children',
        selector: 'h2',
    },
    fontColor: {
        type: 'string',
        default: 'black'
    },
    overlayOpacity: {
        type: 'decimalPoint',
        default: 0.0
    }
},

edit(props) {

    const {
        setAttributes,
        attributes,
        className,
        focus
    } = props;
    const { fontColor } = props.attributes;
    const { overlayOpacity } = props.attributes;

    function onTextChange(changes) {
        setAttributes({
            textString: changes
        });
    }

    function onTextColorChange(changes) {
        setAttributes({
            fontColor: changes
        })
    }
    function onOverlayOpacity(changes) {
        setAttributes({
            overlayOpacity: changes
        })
    }

    return ([
        <InspectorControls>
            <div>
                <strong>Select a font color:</strong>

                <ColorPalette
                    value={fontColor}
                    onChange={onTextColorChange}
                />
            </div>
            <div>
                <RangeControl
                    label="Overlay Opacity"
                    value={ overlayOpacity }
                    onChange={ onOverlayOpacity }
                    min={ 0.0 }
                    max={ 1.0 }
                />
            </div>
        </InspectorControls>,
        <div className={className}
             style={{
                 backgroundImage: `url('http://placehold.it/1440x700')`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center'
             }}>

            <div className="overlay" />
            <RichText
                tagName="h2"
                className="content"
                value={attributes.textString}
                onChange={onTextChange}
                placeholder="Enter your text here!"
                style={{color: fontColor}}
                allowReset={false}
            />
        </div>
    ]);
},

save(props) {

    const { attributes, className } = props;
    const { fontColor } = props.attributes;

    return (
        <div className={className}
             style={{
                 backgroundImage: "url('http://placehold.it/1440x700')",
                 backgroundSize: "cover",
                 backgroundPosition: "center"
             }}>

            <div className="overlay"/>
            <h2 className="content" style={{color: fontColor}}>{attributes.textString}</h2>
        </div>
    );
}

} );