NumericRange is a combo component of two fields allowing users to enter a range of numbers. You can set the input type to match either numeric input or currency input. If enabled, they can enter one number while leaving the other blank allowing the user to define a selection of “More than X” or “Less than Y”. 

• The user clicks or focuses on Input, which makes it active. 

• While the field is active, the user can enter and edit data in it. 

• When finished, the user navigates away from the Input. 

  • If currency is enabled, the number will default to having .00 at the end, or if only one decimal place was entered, will add the trailing zero to the end for readability. If an integer is added, the .00 will be added. Users will be prevented from adding more than two numbers to the right of the decimal. 

• To ask users to enter a specific numeric range, such as an estimated cost range.

• To ask users to input a single value number or currency (see Forge Input). 

NumericRange can be used as a standalone component, but it is better when used with Form and FormField. Form provides a consistent, responsive layout, and FormField adds formatting for labels, error message handling, and hint text. 

Limiting and disabling options 

For example: 

• isCurrency - Enables currency formatting and error handling 
• isInteger - Enables restriction to whole numbers. Only enabled on Numeric non-currency inputs. 
• Set a range for the values - Using max and min value props you can restrict the range. This is also how you would restrict to positive values. 
• Include null values - When used with filters allows users to include null values in their search . 
• Require values - Require one or both fields be filled. 

Use labels and hint text to explain any restrictions. 

Required fields 

Forge offers three options to indicate required form fields. See Form for details. 

Spacing and size 

The height of this component and the vertical space around it vary according to the form layout (i.e., medium, compact, super-compact). See Form for layout variations. 

Doesn't apply to this component. 

Use sentence case for label text (“Patient name”, not “Patient Name”). 

Implementation links

NumericRangeInput directory in Bitbucket

Implementation details

It is strongly recommended to familiarize yourself with the Forge source code. While this documentation is a best effort to document the intent and usage of a component, sometimes some features only become clear when looking at the source code. Also, looking at Forge's source code may help identify and fix bugs in either your application or Forge itself.

Storybook files

Forge maintains at least one storybook file per component. While the primary audience for these files is typically the Forge team, these storybook files may cover usages of the component not covered by a demo. The storybook for the latest version of forge can be found at go/forge-storybook.

Testing library

Forge strongly encourages using testing-library to write tests for your application.

"The more your tests resemble the way your software is used, the more confidence they can give you."

If you're having trouble testing a Forge component using testing-library, it would be a good idea to see how Forge tests its own components. For the most part, Forge tries to use screen.getByRole as much as it can, as that API provides the best feedback on a11y compliance. Forge discourages the use of document.querySelector and screen.getByTestId as both APIs encourage using implementation details to test your component, and discourage adding roles to your component.

With that being said, many of Forge's components were not built with accessibility in mind. These components do break the recommendations listed above.

In Nimbus applications

athenaOne serves the Forge bundle independently from your application's bundle. Importing Forge components directly from '@athena/forge' takes advantage of this feature.

import { NumericRangeInput } from '@athena/forge'

In standalone applications

Importing components using the exact path to the module takes advantage of webpack's tree shaking feature. Webpack will include only that module and its dependencies.

import NumericRangeInput from '@athena/forge/NumericRangeInput';

To use this import guidance, Typescript applications must use typescript >= 4.7.3, and should add this setting to their tsconfig.json file:

{
  "compilerOptions": {
    "moduleResolution": "Node16",
  }
}

If this setting doesn't work for your application, use this import statement instead:

import NumericRangeInput from '@athena/forge/dist/NumericRangeInput';