Range

Range inputs allow users to select a value from a range. Range accepts the $label, $size, $error, $success, $fullWidth, and $wrapperClassName properties also found on the Input component, but not $icon or $iconPosition, and the native size attribute is omitted. Range can have error or success states to provide feedback to the user.

Keep in mind that the <input> element inherently includes native browser properties like min, max, step, and onChange. Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native props. Range also forwards its ref to the underlying <input type="range"> element.

For design guidelines and all interactive states, see the Inputs design page.

import React from "react";
import { Range } from "cherry-styled-components";

export default function Page() {
  return <Range />;
}

With a label:

<Range id="volume" $label="Label" $fullWidth />

The label is only associated with the input when an id is passed, so include one whenever you use $label.

With native min, max, and step attributes and a controlled value:

const [value, setValue] = React.useState(50);

<Range
  min={0}
  max={100}
  step={5}
  value={value}
  onChange={(e) => setValue(Number(e.target.value))}
/>;

With different sizes:

<Range $size="small" />
<Range $size="big" />

With success and error states:

<Range $success />
<Range $error />

Disabled ranges get dedicated styling with a gray track and thumb and a not-allowed cursor:

<Range disabled />

Properties