PhiaUi.Components.Data.DataZoom (phia_ui v0.1.17)

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]}
/>

Summary

Functions

data_zoom(assigns)

Functions

data_zoom(assigns)

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.