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" />Summary
Functions
Renders a horizontal time ruler with a bold time display and tick marks.
Functions
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 to0.end_hour(:integer) - Ruler end hour (exclusive). Defaults to 24. Defaults to24.step_minutes(:integer) - Interval between tick marks in minutes. Defaults to 30. Defaults to30.on_select(:string) - LiveView event name. When set, each tick receivesphx-click={on_select}andphx-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 tonil.Global attributes are accepted. HTML attributes forwarded to the container div.