Can the RangeControl component be set to range between decimals?

Question

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

} );

Answer 1

Yes, set the "step" prop on the RangeControl to the value you want. (This isn't documented but it works.)

Example:

<RangeControl
   label="Overlay Opacity"
   value={ overlayOpacity }
   onChange={ onOverlayOpacity }
   min={ 0.0 }
   max={ 1.0 }
   step={ 0.1 }   
/>