Range - Develop

Range inputs shares the same properties as Input component, it just allows users to Range a value from a range of values. Range can have an error or success state to provide feedback to the user.

Keep in mind that the <input> element inherently includes native browser properties like onChange. Additionally, Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native component props.

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

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

You can add a label by adding a $label prop.

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

export default function Page() {
  return (
    <Range $label="Label" $fullWidth />
  )
}

Here is an example of a Range with success and error state.

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

export default function Page() {
  return (
    <>
      <Range $success />
      <Range $error />
    </>
  )
}

Properties

Explore the source code on GitHub: