Range

To add the Range component to your app:

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

Description

A range lets users choose an approximate value on a slider.

Props

Examples

Default

The default form of a range.

1
2
const RangeExample = () => {
  return (
    <Range value={50} />
  );
};

Controlled

In a controlled range, the state is managed by the React component. Use the onChange handler to set the value.

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

const RangeControlledExample = () => {
  const [value, setValue] = useState(50);

  return (
    <>
      <Range value={value} onChange={(value) => setValue(value)} />
      <Text>The current value is: {value}</Text>
    </>
  );
};

States

Disabled

Set isDisabled to disable a range when another action has to be completed before the range is usable.

Avoid using disabled UI where possible. This can cause accessibility problems because disabled UI does not give enough information about what went wrong and how to proceed.

1
2
const RangeDisabledExample = () => {
  return (
    <Range value={50} isDisabled />
  );
};

Range in a Form component

A range can be used within a Form to collect user input.

1
2
import { Form, FormSection, FormFooter, HelperMessage, Range, Button, useForm } from "@forge/react";

const RangeFormExample = () => {
  const { register, getFieldId, handleSubmit } = useForm();

  return (
    <Form onSubmit={handleSubmit((value) => console.log(value))}>
      <FormSection>
        <Label labelFor={getFieldId("brightness")}>Adjust brightness</Label>
        <Range {...register("brightness")} />
        <HelperMessage>Move the slider to set your preferred brightness level, then press submit.</HelperMessage>
      </FormSection>
      <FormFooter align="start">
        <Button type="submit">Submit</Button>
      </FormFooter>
    </Form>
  );
};