The Outsiders Sleep Goal Slider Interaction

This interaction demonstrates a highly responsive sleep goal setup screen. As the user drags the slider thumb, the hour and minute text updates dynamically. A contextual badge ('ABOVE RECOMMENDED RANGE' or 'BELOW RECOMMENDED RANGE') slides and fades into view when the selection falls outside the healthy 7-9 hour window. Simultaneously, the primary 'Done' button at the bottom smoothly transitions its background color to match the current state (cyan for below, green for recommended, and pink for above), providing immediate visual reinforcement.