Range

This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Range

To add the Range component to your app:

1
2
import { Range } from "@forge/react";

Description

A slider control that allows the user to select from a range of integer values.

Props

Name	Type	Required	Description
`label`	`string`	Yes	The label text to display.
`name`	`string`	Yes	The key to which the input value is assigned in the returned form object.
`defaultValue`	`string`		The selected range value that’s initially displayed.
`min`	`string`		The minimum value for the slider's range.
`max`	`string`		The maximum value for the slider's range.
`step`	`string`		The stepping interval between the `min` and `max` values that the slider can snap to. Must be greater than 0.
`onChange`	`(value: number) => void \| Promise`	No	An event handler that can be asynchronous. Allows you to read values from the component without having to submit as part of a `Form`.

Example

A range component that allows to select a number within the range of 1 to 10

1
2
const App = () => {
  return (
    <Range
      label="Range"
      name="my-range-field"
      min={1}
      max={10}
      step={1}
      onChange={(value) => console.log(value)}
    />
  );
};

Output

Example image of rendered range