# Range

Range fields let the user choose a numeric value which must be _no less_ than a given value, and _no more_ than another. Supports both integer and decimal values.


## Data Structure

The value is stored as an integer or float, depending on your field configuration.

If your `min`, `max`, and `step` are all integers, the value will be stored as an integer:

``` yaml
number: 42
```

If any of `min`, `max`, or `step` contain decimal values, the value will be stored as a float:

``` yaml
opacity: 0.75
temperature: 21.5
```

## Example Configurations

### Integer Range (Default)

``` yaml
fields:
  age:
    type: range
    min: 0
    max: 100
    step: 1
```

### Decimal Range

For values like percentages, opacity, or other decimal values:

``` yaml
fields:
  opacity:
    type: range
    min: 0
    max: 1
    step: 0.1
  temperature:
    type: range
    min: -10.5
    max: 42.5
    step: 0.5
    append: '°C'
```

## Templating

Use the variable in your templates to display the value. That's pretty much it.

::tabs

::tab antlers
```antlers
<p>My favorite number is {{ number }}.</p>
```

::tab blade
```blade
<p>My favorite number is {{ $number }}.</p>
```
::

```html
<p>My favorite number is 42.</p>
```