Vfrdtyky

I am building (and learning as I go) a hero image block for Gutenberg. I am following a tutorial on it, and it works fine so far.
But I want to use a RangeControl component (in the Gutenberg Editor Inspector Controls), to control the opacity of a hero overlay. That also works, but can only set a range with integers (ie from 1 to 10). Is it possible to use decimals instead (so the range will be 0.0 to 1.0) ?
Of course I can use integers and convert them to decimals afterwards, but it is not the best UX.

I use the (very fine) create-guten-block boilerplate, and here is the code for the block (NOTE: I am aware that I haven't completed the save() method yet!):

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>

    );

}

} );