A multi type input component that supports standard text, email, tel.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
customAttributesobject

Custom attributes for the component.

customClassesstring | Array | object

Custom classes for the component.

disabledboolean

If input is disabled.

helpTextAttributesobject

Custom attribute for the help text.

helpTextPositionstring

The position of the help text.

idstring

Optional id. Auto generated if not passed.

labelAttributesobject

Any custom attributes for the label.

maxnumber

Maximum value for the range.

minnumber

Minimum value for the range.

namestring

The name attribute for the input.

onBlurfunction

On blur function handler.

onChangefunction

On change function handler.

onFocusfunction

On focus function handler.

showValueInputboolean

Whether to display the value input or not.

spacingstring | number | Array | object

The spacing for the component, as a string, number, array, or object.

stepnumber

The step size of the range.

themestring

The theme of the range.

valuenumber

The input value.

valueInputPositionstring

The position of the value input, one of before or after.

valueInputSuffixstring

Suffix for the value input.

wrapperAttributesobject

Custom attributes for the wrapper element.

wrapperClassesstring | Array | object

Custom classes for the wrapper element.

wrapperTagNameobject

Tag to use for the input wrapper. Defaults to div.

refobject | null

Ref to the component.

Since
  • 1.1.15
Source
Returns:

The range component.

Type: 
JSX.Element
Example
import Range from '@gravityforms/components/react/admin/elements/Range';

return (
    <Range
        max={ 100 }
        min={ 0 }
        name="range-name"
        onChange={ () => {} }
        step={ 5 }
        value={ 50 }
    />
);

Methods

(inner) getValueInput() → {JSX.Element}

Get the value input for the range component.

Since
  • 1.1.15
Source
Returns:

The value input react markup.

Type: 
JSX.Element