About UI Kit 2
UI Kit 2 components
UI kit components
Product bridge APIs
Jira bridge APIs

This section 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

NameTypeRequiredDescription
labelstringYesThe label text to display.
namestringYesThe key to which the input value is assigned in the returned form object.
defaultValuestringThe selected range value that’s initially displayed.
minstringThe minimum value for the slider's range.
maxstringThe maximum value for the slider's range.
stepstringThe stepping interval between the min and max values that the slider can snap to. Must be greater than 0.
onChange(value: number) => void | PromiseNoAn 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

Rate this page: