# `PhiaUi.Components.Data.DataZoom`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/data_zoom.ex#L1)

Range slider for chart data zooming.

Inspired by eCharts `dataZoom` slider — provides a draggable range control
below a chart for selecting a data subset. Sends `phx-change` events with
normalized `%{"start" => 0.0, "end" => 1.0}` values.

## Examples

    <.data_zoom
      id="zoom-1"
      start={0.2}
      end_val={0.8}
      on_change="zoom-changed"
    />

    <.data_zoom
      id="zoom-2"
      show_minimap={true}
      minimap_data={[10, 25, 30, 15, 40, 35, 20]}
    />

# `data_zoom`

## Attributes

* `id` (`:string`) (required) - Required for phx-hook.
* `start` (`:float`) - Initial start position (0.0–1.0). Defaults to `0.0`.
* `end_val` (`:float`) - Initial end position (0.0–1.0). Defaults to `1.0`.
* `height` (`:integer`) - Height of the zoom slider in pixels. Defaults to `40`.
* `show_minimap` (`:boolean`) - Show minimap sparkline in background. Defaults to `false`.
* `minimap_data` (`:list`) - List of numeric values for minimap. Defaults to `[]`.
* `minimap_color` (`:string`) - Minimap area fill color. Defaults to `"oklch(0.60 0.20 240)"`.
* `on_change` (`:string`) - Event name to send on range change. Defaults to `nil`.
* `traveller_width` (`:integer`) - Width of handle traveller bars in px. Defaults to `5`.
* `gap` (`:integer`) - Minimum gap between start and end (0-100 percent). Defaults to `1`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*