✨ Time range slider widget — a polished dual-handle control with labeled ticks and floating time bubbles. Perfect for booking windows, quiet hours, delivery slots, and any UI where users pick a start–end time fast and precisely. ⏱️📅
Functionality
-
🎚️ Dual handles to select start-end times with a colored active track.
-
💬 Floating tooltips show live time (e.g., 1:30 PM, 8:00 PM).
-
📏 Tick marks + labels along the scale for instant orientation.
-
⚙️ Step control (1/5/15/30 min) with optional snap-to-step.
-
🕰️ 12/24-hour formats with locale-aware AM/PM rendering.
-
🌍 Timezone support (fixed, device, or user-selectable).
-
🚦 Min/Max bounds (e.g., 06:00–23:00) with validation & clamping.
-
🚫 Disabled/blackout intervals (lunch, maintenance).
-
🔁 Overlap handling: swap or lock thumbs when they meet.
-
🖱️⌨️ Tap/drag/keyboard (Arrows, PgUp/PgDn) for fine control.
-
📳 Haptics & ripple states (optional) for tactile feedback.
-
🎨 Theming: accent, track thickness, handle radius, tooltip style.
-
↔️ RTL support & responsive layout for cards, sheets, modals.
-
♿ Accessible: semantic labels, large touch targets, high-contrast text.
-
🔌 Data binding: Firestore / Supabase / REST / local state with onChange/onEnd.
Great for: 🏨 booking windows, 🤫 quiet hours, 🚚 delivery slots, 🕘 working hours, 🗓️ availability pickers.
Keywords: time range slider widget, schedule picker, start end time, dual handle slider, time selector, hourly slider, tick marks, tooltip time, AM PM, 12 hour format, 24 hour format, timezone aware, blackout intervals, min max time, step minutes, snap to step, active track, ripple feedback, keyboard control, RTL support, accessible slider, responsive UI, booking window, delivery slot, quiet hours, working hours, availability picker, FlutterFlow slider, FlutterFlow widget, theming, data binding, Firestore, Supabase, REST API, modern UI, premium template.
Time Range Slider - Schedule Picker
- Fixed price & scope
- Pixel-perfect UI/UX
- App Store & Google Play submission
You may only use this template for one project. For more details, please read the Marketplace Terms of Service.