# Range
> Cherry Range component - validation states and label support.
Source: https://cherry.al/code/range
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# 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 `` 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 `` element.
For design guidelines and all interactive states, see the [Inputs](/inputs) design page.
```jsx
import React from "react";
import { Range } from "cherry-styled-components";
export default function Page() {
return ;
}
```
With a label:
```html
```
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:
```jsx
const [value, setValue] = React.useState(50);
setValue(Number(e.target.value))}
/>;
```
With different sizes:
```html
```
With success and error states:
```html
```
Disabled ranges get dedicated styling with a gray track and thumb and a `not-allowed` cursor:
```html
```
## Properties
Label text displayed above the range. Pass an `id` on the Range so the label
is associated with the input.
Size of the range slider.
Shows error state styling and sets `aria-invalid` on the input.
Shows success state styling.
Makes the range span the full width of its container.
Class name applied to the wrapper element around the range slider, for restyling from the outside.