Может ли компонент RangeControl быть установлен в диапазоне между десятичными числами?

Question

Я строю (и учусь на ходу) блок изображения героя для Гутенберга. Я следую учебнику , и пока он работает отлично. Но я хочу использовать компонент RangeControl (в элементах управления Инспектора редактора Гутенберга), чтобы управлять непрозрачностью оверлея героя. Это также работает, но можно установить диапазон только с целыми числами (т.е. от 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>
    );
}

});

Answer 1

Да, установите значение «step» в RangeControl на желаемое значение.(Это не задокументировано, но работает.)

Пример:

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