Gentler Streak Sleep Goal Slider and Button Color Change Interaction

This interaction showcases a highly responsive sleep goal slider in a bottom sheet modal. As the user drags the slider handle, the entire interface adapts dynamically. The slider track, handle, and the primary 'Done' button smoothly transition colors (from calm purple to warning red) to visually communicate whether the selected duration is below, within, or above the recommended range. A contextual badge also fades and scales in above the handle to provide explicit text feedback, creating a cohesive and playful gamified experience.