# `PhiaUi.Components.TimeSliderPicker`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/calendar/time_slider_picker.ex#L1)

TimeSliderPicker — horizontal time ruler/scrubber display.

Renders the selected time as large bold text above a horizontal tick-mark
ruler. The ruler contains evenly spaced tick marks; the tick at the selected
time is rendered taller and in the primary colour to act as an indicator.
Optional hour labels appear beneath full-hour tick marks.

This component is **display-only** — zero JavaScript. The parent LiveView is
responsible for handling time changes. When `on_select` is provided, each tick
receives a `phx-click` event and a `phx-value-time="HH:MM"` attribute so the
LiveView can pattern-match on the chosen slot.

## Examples

    <%!-- Basic 24-hour ruler with selected time 12:30 --%>
    <.time_slider_picker hour={12} minute={30} />

    <%!-- Business-hours ruler (08:00–18:00), hourly steps --%>
    <.time_slider_picker
      hour={@hour}
      minute={@minute}
      start_hour={8}
      end_hour={18}
      step_minutes={60}
      on_select="pick_time"
    />

    <%!-- Custom container class --%>
    <.time_slider_picker hour={9} minute={30} class="w-full max-w-lg" />

# `time_slider_picker`

Renders a horizontal time ruler with a bold time display and tick marks.

## Examples

    <.time_slider_picker hour={12} minute={30} />

    <.time_slider_picker
      hour={@hour}
      minute={@minute}
      start_hour={8}
      end_hour={18}
      step_minutes={60}
      on_select="pick_time"
    />

## Attributes

* `hour` (`:integer`) (required) - Selected hour (0–23).
* `minute` (`:integer`) (required) - Selected minute (0–59).
* `start_hour` (`:integer`) - Ruler start hour (inclusive). Defaults to 0. Defaults to `0`.
* `end_hour` (`:integer`) - Ruler end hour (exclusive). Defaults to 24. Defaults to `24`.
* `step_minutes` (`:integer`) - Interval between tick marks in minutes. Defaults to 30. Defaults to `30`.
* `on_select` (`:string`) - LiveView event name. When set, each tick receives `phx-click={on_select}`
  and `phx-value-time="HH:MM"`. The parent handles the event to update
  the selected time.

  Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the container div.

---

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