Skip to Content
Range ALPHA

Range

Allow users to select a numeric value within a range.

Source

#

Documentation

#

Usage

85%
90%
95%
99%
"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Field } from "@optiaxiom/react";
import { Range } from "@optiaxiom/react/unstable";
 
export function App({
  description,
  error,
  label = "Significance Level",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
      w="384"
    >
      <Range
        defaultValue={95}
        getLabel={(value) => `${value}%`}
        marks={[85, 90, 95, 99]}
        max={99}
        min={85}
        showTooltip
      />
    </Field>
  );
}

#

Label and Description

Wrap Range in a Field component to provide a visible label and description. The Field component automatically handles the accessibility attributes (aria-labelledby, aria-describedby) for you.

Alternatively, if you don’t need a visible label, you can use the aria-label prop directly on the Range component for screen reader accessibility.

85%
90%
95%
99%
"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Field } from "@optiaxiom/react";
import { Range } from "@optiaxiom/react/unstable";
 
export function App({
  description,
  error,
  label = "Significance Level",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
      w="384"
    >
      <Range
        defaultValue={95}
        getLabel={(value) => `${value}%`}
        marks={[85, 90, 95, 99]}
        max={99}
        min={85}
        showTooltip
      />
    </Field>
  );
}

#

Controlled

Use the value and defaultValue props to toggle between controlled and uncontrolled usage. And combine it with onValueChange to listen for changes to the state.

50
"use client";
 
import { Box, Button, Group } from "@optiaxiom/react";
import { Range } from "@optiaxiom/react/unstable";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState(50);
 
  return (
    <Group flexDirection="column" gap="16" w="384">
      <Group gap="16">
        <Range onValueChange={setValue} value={value} />
        <Box asChild fontSize="md" w="56">
          <output>{value}</output>
        </Box>
      </Group>
      <Button
        alignSelf="start"
        disabled={value === 50}
        onClick={() => setValue(50)}
      >
        Reset
      </Button>
    </Group>
  );
}

#

Max/Min/Step

Use the max/min/step props to specify the maximum, minimum, and step values for the range.

70
80
90
100
"use client";
 
import { Range } from "@optiaxiom/react/unstable";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState(85);
  return (
    <Range
      marks={[70, 80, 90, 100]}
      max={100}
      min={70}
      onValueChange={setValue}
      showTooltip
      step={5}
      value={value}
      w="384"
    />
  );
}

#

Sizes

Use the size prop to control the size of the range control.

20
50
80
"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Range } from "@optiaxiom/react/unstable";
 
export function App({
  size,
}: Pick<ComponentPropsWithRef<typeof Range>, "size">) {
  return <Range defaultValue={20} marks={[20, 50, 80]} size={size} w="384" />;
}

#

Disabled state

Enable the disabled prop to toggle the disabled state of the input field.

"use client";
 
import { Range } from "@optiaxiom/react/unstable";
 
export function App({ disabled = true }: { disabled?: boolean }) {
  return <Range defaultValue={30} disabled={disabled} w="384" />;
}

#

Tooltip

Enable the showTooltip prop to toggle the visibility of the tooltip above the thumb.

"use client";
 
import { Range } from "@optiaxiom/react/unstable";
 
export function App({ showTooltip = true }: { showTooltip?: boolean }) {
  return <Range defaultValue={30} showTooltip={showTooltip} w="384" />;
}

#

Label

Use the getLabel prop to customize the label shown inside the tooltip.

"use client";
 
import { Range } from "@optiaxiom/react/unstable";
 
export function App({ showTooltip = true }: { showTooltip?: boolean }) {
  return (
    <Range
      defaultValue={30}
      getLabel={(value) => `${value}%`}
      showTooltip={showTooltip}
      w="384"
    />
  );
}

#

Marks

Use the marks prop to add visual markers along the range track.

Marks can be an array of numbers or objects with value and label properties.

Generate labels dynamically

20%
50%
80%

Specify labels for each mark

20%
50%
80%
"use client";
 
import { Group, Text } from "@optiaxiom/react";
import { Range } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Text>Generate labels dynamically</Text>
      <Range
        defaultValue={20}
        getLabel={(value) => `${value}%`}
        marks={[20, 50, 80]}
        w="384"
      />
      <Text>Specify labels for each mark</Text>
      <Range
        defaultValue={20}
        marks={[
          { label: "20%", value: 20 },
          { label: "50%", value: 50 },
          { label: "80%", value: 80 },
        ]}
        w="384"
      />
    </Group>
  );
}

#

Related

Input

Basic text field for capturing user input.

Select

Select a value from a list of options inside a dropdown menu.

#

Props

#

Range

import { Range } from "@optiaxiom/react/unstable";

Supports all Box props in addition to its own. Renders a <div> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

children

ReactNode

className

string

defaultValue

The initial selected value in uncontrolled mode.

number

Default: 0

disabled

Whether the input is disabled and in read only mode.

false | true

getLabel

Function to format the label for each value.

(value: number) => string

Default: (value) => value

marks

The marks to display on the range steps.

(number | { label: string; value: number; })[]

max

The maximum value for the range.

number

Default: 100

min

The minimum value for the range.

number

Default: 0

onValueChange

Handler that is called when the value changes.

(value: number) => void

showTooltip

Whether to show a tooltip with the current value above the thumb.

false | true

Default: false

size

Control the size of the range.

"md" | "lg"

Default: md

step

The stepping interval for the range.

number

Default: 1

value

The selected value in controlled mode.

number

#

Accessibility

#

Labels

  • Wrap Range in Field for a visible label, or pass aria-label when there isn’t one.

#

Keyboard interactions

Key

Description

ArrowUpArrowLeft

Increments by the step value.

ArrowDownArrowRight

Decrements by the step value.

PageUpPageDown

Increments/decrements by a larger step value.

Home

Sets the value to its minimum.

End

Sets the value to its maximum.

#

Changelog

#

1.7.12

  • Added component
Last updated on
RadioGroupSearchInput