Range

Allow users to select a numeric value within a range.

Source

#
Documentation

#
Usage

Significance Level

85%

90%

95%

99%

Description

Error

Label

Required


"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.

Significance Level

85%

90%

95%

99%

Description

Error

Label

Required


"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.


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

#
Max/Min/Step

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

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.

Size


"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.

Disabled


"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.

Show tooltip


"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.

Show 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 { Flex, Text } from "@optiaxiom/react";
import { Range } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Flex>
      <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"
      />
    </Flex>
  );
}

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`
`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

#
Keyboard interactions

Key	Description
`ArrowUp` `ArrowLeft`	Increments by the `step` value.
`ArrowDown` `ArrowRight`	Decrements by the `step` value.
`PageUp` `PageDown`	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