Range

Range inputs share the same properties as the Input component, but allow users to select a value from a range. 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 onChange. Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native props.

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

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

With a label:

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

With success and error states:

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

Properties