# Range Field Component

Customizable range slider input with labels and value display.

**Documentation**: https://mishka.tools/chelekom/docs/forms/range-field

> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.

## Generate

```bash
mix mishka.ui.gen.component range_field
```

## Dependencies

| Type | Components |
|------|------------|
| **Necessary** | `icon` |
| **Optional** | None |
| **JavaScript** | None |

## Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `color` | `:string` | `"base"` | Color theme — `base`, `natural`, `white`, `primary`, `secondary`, `dark`, `success`, `warning`, `danger`, `info`, `silver`, `misc`, `dawn` |
| `size` | `:string` | `"medium"` | Slider size — `extra_small`, `small`, `medium`, `large`, `extra_large` |
| `appearance` | `:string` | `"default"` | Visual style (e.g. `"custom"`) |
| `min` | `:string` | `"0"` | Minimum value |
| `max` | `:string` | `"100"` | Maximum value |
| `step` | `:string` | `"1"` | Step increment |
| `value` | `:string` | `nil` | Current value |
| `label` | `:string` | `nil` | Label text |

## Slots

### `range_value`

Value labels at different positions.

| Attribute | Type | Description |
|-----------|------|-------------|
| `position` | `:string` | `start`, `middle`, or `end` |

## Usage Examples

### Basic / labeled

```heex
<.range_field name="volume" value="50" />
<.range_field name="brightness" label="Brightness" value="75" />
```

### Custom range (min/max/step)

```heex
<.range_field name="price" min="100" max="1000" step="50" value="500" />
```

### With value labels

```heex
<.range_field name="price" value="500" min="100" max="1000">
  <:range_value position="start">$100</:range_value>
  <:range_value position="middle">$500</:range_value>
  <:range_value position="end">$1000</:range_value>
</.range_field>
```

### Colors and sizes

```heex
<.range_field name="slider" value="50" color="primary" />
<.range_field name="slider" value="50" color="success" size="small" />
<.range_field name="slider" value="50" color="warning" size="large" />
```

### Custom appearance

```heex
<.range_field
  name="custom"
  appearance="custom"
  value="40"
  color="warning"
  size="small"
  min="10"
  max="100"
  step="5"
>
  <:range_value position="start">Min ($100)</:range_value>
  <:range_value position="middle">$700</:range_value>
  <:range_value position="end">Max ($1500)</:range_value>
</.range_field>
```

## Common Patterns

### Volume control (paired with icon)

```heex
<div class="flex items-center gap-3">
  <.icon name="hero-speaker-wave" class="size-5" />
  <.range_field name="volume" value={@volume} min="0" max="100" class="flex-1" />
  <span class="text-sm w-8">{@volume}%</span>
</div>
```

### Price filter

```heex
<div class="space-y-2">
  <label class="font-medium">Price Range</label>
  <.range_field name="max_price" value={@max_price} min="0" max="1000" step="10">
    <:range_value position="start">$0</:range_value>
    <:range_value position="end">$1000</:range_value>
  </.range_field>
  <p class="text-sm text-gray-600">Max: ${@max_price}</p>
</div>
```

### Rating slider

```heex
<.range_field
  name="rating"
  label="Your Rating"
  min="1"
  max="10"
  step="1"
  value="5"
  color="warning"
>
  <:range_value position="start">1</:range_value>
  <:range_value position="middle">5</:range_value>
  <:range_value position="end">10</:range_value>
</.range_field>
```