Packages

mishka_chelekom

0.0.9
0.0.10-alpha.5 0.0.10-alpha.4 0.0.10-alpha.3 0.0.10-alpha.2 0.0.10-alpha.1 0.0.9 0.0.9-rc.2 0.0.9-rc.1 0.0.9-beta.5 0.0.9-beta.4 0.0.9-beta.3 0.0.9-beta.2 0.0.9-beta.1 0.0.9-alpha.20 0.0.9-alpha.18 0.0.9-alpha.17 0.0.9-alpha.16 0.0.9-alpha.15 0.0.9-alpha.14 0.0.9-alpha.13 0.0.9-alpha.12 0.0.9-alpha.11 0.0.9-alpha.10 0.0.9-alpha.9 0.0.9-alpha.8 0.0.9-alpha.7 0.0.9-alpha.6 0.0.9-alpha.5 0.0.9-alpha.4 0.0.9-alpha.3 0.0.9-alpha.2 0.0.9-alpha.1 0.0.8 0.0.8-rc.2 0.0.8-rc.1 0.0.8-beta.5 0.0.8-beta.4 0.0.8-beta.3 0.0.8-beta.2 0.0.8-beta.1 0.0.8-alpha.4 0.0.8-alpha.3 0.0.8-alpha.2 0.0.8-alpha.1 0.0.7 0.0.6 0.0.6-alpha.2 0.0.6-alpha.1 0.0.5 0.0.5-beta.2 0.0.5-beta.1 0.0.5-alpha.12 0.0.5-alpha.11 0.0.5-alpha.10 0.0.5-alpha.9 0.0.5-alpha.8 0.0.5-alpha.7 0.0.5-alpha.6 0.0.5-alpha.5 0.0.5-alpha.4 0.0.5-alpha.3 0.0.5-alpha.2 0.0.5-alpha.1 0.0.4 0.0.4-beta.3 0.0.4-beta.2 0.0.4-beta.1 0.0.4-alpha.9 0.0.4-alpha.8 0.0.4-alpha.7 0.0.4-alpha.6 0.0.4-alpha.5 0.0.4-alpha.4 0.0.4-alpha.3 0.0.4-alpha.2 0.0.4-alpha.1 0.0.3 0.0.3-alpha.3 0.0.3-alpha.2 0.0.3-alpha.1 0.0.2 0.0.2-rc.2 0.0.2-rc.1 0.0.2-beta.4 0.0.2-beta.3 0.0.2-beta.2 0.0.2-beta.1 0.0.2-alpha.3 0.0.2-alpha.2 0.0.2-alpha.1 0.0.1

Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
91 Versions
10 Dependencies
Dependants
Files
Activity
mishka_chelekom usage-rules components range_field.md
Raw

usage-rules/components/range_field.md 

# 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>

```