NumericRange

Props

Name	Type	Description
defaultValue	[number \| null, number \| null] \| null	Default value for the uncontrolled mode
format	string	# is a placeholder for your numbers. . or , is a fractional pert separator, use either of them. The number of # after a fractional separator corresponds to the number of fractional digits. # => 1000 (any whole number) #. => 1000 #.# => 1000.0 #.### => 1000.000 You can use prefixes and suffixes alongside with numbers, they must be separated by a space. # min => 1000 min from # days => from 1000 days # is the default format
hasStepper	boolean	Whether or not to show stepper buttons
isDisabled	boolean \| [boolean, boolean]	Disable the component
max	number	Max value of the whole range
min	number	Min value of the whole range
onBlur	(event: NumericRangeBlurEvent) => void interface NumericRangeBlurEvent extends React.FocusEvent<HTMLInputElement> { component: { formattedValue: [string, string], isValid?: boolean, name?: string, value: [number \| null, number \| null], }, }	Blur handler
onChange	(event: NumericRangeChangeEvent) => void interface NumericRangeChangeEvent { component: { formattedValue: [string, string], name?: string, value: [number \| null, number \| null], }, }	Value change handler
onEnterPress	(event: NumericRangeEnterPressEvent) => void interface NumericRangeEnterPressEvent extends React.KeyboardEvent<HTMLInputElement> { component: { name?: string, value: [number \| null, number \| null], }, }	Enter press handler
onFocus	(event: NumericRangeFocusEvent) => void interface NumericRangeFocusEvent extends React.FocusEvent<HTMLInputElement> { component: { formattedValue: [string, string], name?: string, value: [number \| null, number \| null], }, }	Focus handler
placeholder	[string \| undefined, string \| undefined] \| string	placeholder
shouldTrimTrailingZeros	boolean	To trim or not to trim
shouldRender	boolean	Pass `false` if you don't want the component to appear
step	number	How much the value is increased/decreased on mouse events
thousandsSeparator	string	A space by default (1 000 000.00)
value	[number \| null, number \| null] \| null	Component value
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.

Uncontrolled
Controlled


<L.NumericRange
  defaultValue={[1, 10]}
  format='#.# robots'
  hasStepper
  onBlur={({ component }) => console.log('blur', component.value)}
  onChange={({ component }) => console.log('change', component.value)}
  onEnterPress={({ component }) => console.log('enter', component.value)}
  onFocus={({ component }) => console.log('focus', component.value)}
  _w-96
/>

Validation components' props

Name	Type	Description
form	string	Form name
invalidMessage	ReactNode	Text to show when the value does not match requirements
isValid	boolean	Controlled valid state
name	string	Component name
persistence	'sessionStorage' \| 'localStorage'	Persist the value in web storage
requiredMessage	ReactNode	Text to show when the field is not filled
shouldValidateUnmounted	boolean	The field can still affect form submission even if it is not rendered
validator	Validator \| PredefinedValidator \| RegExp \| ValidatorObject[]
	interface Validator { (value: any): boolean, }	A validator is a function that takes a value and returns true or false depending on the logic it contains E.g. `(value) => value.length > 4`
	type PredefinedValidator = \| 'creditCardNumber' \| 'email' \| 'url'	See predefined validators
	interface ValidatorObject { validator: PredefinedValidator \| RegExp \| Validator, invalidMessage?: string, }	`ValidatorObject` is useful wnen you need to validate a value against several validators and show inividual messages for each. Just use an array of validator objects. E.g. [ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

<>
<L.NumericRange
  hasStepper
  onBlur={({ component }) => console.log('blur', component.value)}
  onChange={({ component }) => console.log('change', component.value)}
  onEnterPress={({ component }) => console.log('enter', component.value)}
  onFocus={({ component }) => console.log('focus', component.value)}
  form='numeric-range-form'
  name='numeric-range'
  _w-96
/>
<br />
<L.Button
  form='numeric-range-form'
  onClick={({ form }) => console.log(form)}
>
  Click me
</Button>
</>

Customization props

Name	Type
inputsRender invalidMessageRender wrapperRender	({ Element, elementprops, componentProps, componentState }): React.ReactNode	Customization


<L.NumericRange
  hasStepper
  onChange={({ component }) => console.log('change', component.value)}
  _w-96
/>