> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/time-range.md). # Time Range Picker The Avonni Time Range Picker lets users select a start time and an end time within a single input. Drop it onto the canvas whenever you need to capture a span of time — such as an appointment window, a shift, or business hours — with the two values kept together as one range. ## Overview The Time Range Picker presents two time inputs side by side: one for the start time and one for the end time. You control the labels, the help text, how the times are formatted, and whether the field is required, disabled, or read-only. The sections below follow the configuration panel from top to bottom, so you can read along as you build. ## Configuration To configure the Time Range Picker, select it on the canvas. The **Edit Time Range Picker** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab. ### General The top group of the Properties tab holds the picker's core settings. #### Label The **Label** setting defines the text label shown above the input time range. Use it to tell users what the range represents. #### Start Time The **Start Time** setting specifies the value of the start time input. Set it to pre-fill the beginning of the range when the component loads. #### End Time The **End Time** setting specifies the value of the end time input. Set it to pre-fill the end of the range when the component loads. #### Field Level Help The **Field Level Help** setting adds help text that details the purpose and function of the input. It appears as a small help icon next to the label, giving users extra guidance without cluttering the field. #### Variant The **Variant** setting changes the appearance of the input field. Pick the option that fits your layout: * **Standard** (default) — the label is displayed above the input. * **Label Hidden** — the label is hidden, for a cleaner look or when the field's purpose is already clear. #### Required When **Required** is enabled, the input field must be filled out before the form is submitted. #### Disabled When **Disabled** is enabled, the input field is disabled and users cannot interact with it. #### Read only When **Read only** is enabled, the input is read-only and cannot be edited by users. ### Format The Format group controls how the selected times are displayed. #### Time Style The **Time Style** setting controls the level of detail used to display each time. Choose the option that matches how precise the time should appear: * **Short** (default) — the most compact format. * **Medium** — a moderately detailed format. * **Long** — the most detailed format. ### Time Labels The Time Labels group lets you label each of the two inputs individually. This group is collapsed by default. #### Start Time The **Start Time** setting in this group defines the text label for the start time input. #### End Time The **End Time** setting in this group defines the text label for the end time input. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Time Range Picker. Configure them from the **Interactions** tab of the Edit Time Range Picker panel. ### Change Fires when the user changes the start time or end time. Use this to update a record, recalculate a duration, or trigger any flow logic that depends on the selected time range. ## Styling The **Style** tab gives you control over the Time Range Picker's appearance. Configure it from the **Style** tab of the Edit Time Range Picker panel. {% tabs %} {% tab title="Margin" %} Controls the *outer* spacing around the picker, creating space between it and other elements. * **Top / Right / Bottom / Left:** Adjust the space on each side. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the picker's content and its border. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Border" %} Customizes the border surrounding the picker. * **Color:** Set the border color. * **Size:** Adjust the border thickness. * **Style:** Choose a border style (e.g. solid, dashed, dotted). * **Radius:** Control the roundness of the corners. {% endtab %} {% tab title="Label" %} Styles the picker's header label text. * **Color:** Set the label text color. * **Font Size / Font Style / Font Weight:** Control the label typography. {% endtab %} {% tab title="Time Labels" %} Styles the start and end time labels. * **Color:** Set the time label text color. * **Font Size / Font Style / Font Weight:** Control the time label typography. {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/time-range.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.