Slider Time

A dynamic onboarding step component that displays an interactive time/duration slider using Rive animations. Allows users to select values either through a slider interface or a custom picker modal, with support for different variants (time, duration, other) and customizable styling options. Integrates with the global apps context to store user selections.

Step Config

Key	Description	Is Optional?
type	Should be sliderTime to differs from other steps.	Required
stepId	Unique step identifier.	Required
backgroundColor	The background color of the page.	Required
sliderUrl	URL to rive asset that will be used, if added it will override the variant	Optional
variant	Variant that controls the used rive asset. The time represents the time slider asset and duration represent the duration slider asset. should be time or duration	Required
title	Title text to show on top of the step.	Optional
subtitle	Subtitle Text to show below the title.	Optional
otherButtonLabel	Label for the other button, if skipped the other button is skipped as well.	Optional
otherButtonBackgroundColor	Background color of other button	Optional
cta	The CTA to be added.	Required
picker	The picker that opens on clicking other button.	Optional

CTA Config

Key	Description	Is Optional?
text	CTA text.	Required
textColor	CTA text color.	Required
backgroundColor	The background color of the CTA.	Required

Picker Config

Key	Description	Is Optional?
title	Title text.	Required
titleColor	Title text color.	Required
mapResult	String to show how to map the result to be shown. Example if you have 3 columns with keys hour, minute and amPm then a mapResult option is {{hour}}:{{minute}} {{amPm}} which will view the selection in the previous format.	Required
columns	The options to be added inside the picker, it can consist of multiple columns	Required

Column Config

Key	Description	Is Optional?
key	Key identifier for a column. Must be unique for each column.	Required
padStart	adds pad start to numbers. Ex. if padStart is 2 then 1 will be rendered as 01	Optional
initialValue	Initial selected value.	Required
unitLabel	adding unit to selected option	Optional
values	Array of values to be added as options in the picker Ex. [1,2,3,4,5,6,7,8,9,10,11,12]	Optional in case valuesIncrement is added
valuesIncrement	Object that takes start, end and increment and created a list accordingly to create 0 to 59 list you can use {   "start": 0,   "end": 59,   "increment": 1 }	Optional in case values is added, if both added valuesIncrement will take effect

Example

YesNoQuestion

{
    "id": "fabulous_app_id2",
    "journeyId": "6Gr4B9SkA3",
    "bold": true,
    "appId": "co.thefabulous.app",
    "language": "en",
    "seo": {
        "title": "Fabulous",
        "favicon": "https://www.thefabulous.co/images/favicon.png",
        "description": "Track Your Way to Better Mental Health with A Top-Ranked App. Say Goodbye to uncertainty with Fabulous, Kickstart your day with a productive and healthy routine."
    },
    "managerConfig": {
        "type": "energy",
        "properties": {
            "onboarding_in_app_message_sequence_enabled": false,
            "onboarding_play_alternate_pings": true,
            "onboarding_play_background_music": true
        }
    },
    "steps": [
        {
            "stepId": "slider_time",
            "type": "sliderTime",
            "variant": "time",
            "backgroundColor": "#151729",
            "title": "Think about the night before a typical \"work day\":",
            "subtitle": "How many hours do you sleep?",
            "otherButtonLabel": "Other Time",
            "cta": {
                "text": "Next",
                "textColor": "#19223E",
                "backgroundColor": "#B3C0DD"
            },
            "picker": {
                "title": "Select Time",
                "titleColor": "#e2b3b8",
                "mapResult": "{{hour}}:{{minute}} {{am_pm}}",
                "columns": [
                    {
                        "key": "hour",
                        "padStart": 2,
                        "valuesIncrement": {
                            "start": 1,
                            "end": 12,
                            "increment": 1
                        },
                        "initialValue": 8
                    },
                    {
                        "key": "minute",
                        "padStart": 0,
                        "valuesIncrement": {
                            "start": 0,
                            "end": 59,
                            "increment": 1
                        },
                        "initialValue": 30
                    },
                    {
                        "key": "am_pm",
                        "values": ["AM", "PM"]
                    }
                ]
            }
        },
        {
            "type": "webview",
            "stepId": "webviewPremium49",
            "engine": "premium",
            "module": "webfloating_pricing_control",
            "hideCloseButton": true,
            "subprintText": "",
            "subprintColor": "#9B9B9B",
            "topSubprintColor": "#5F5F5F",
            "isOffer": true,
            "showTrialReminderDialog": true,
            "backgroundColor": "#0004A3",
            "ctaText": "Continue",
            "topSubprintText": "2 taps to start, super easy to cancel",
            "deepLink": "{{APPLICATION_ID}}://pay/normalannual",
            "redirectTo": "https://start.thefabulous.co/payment/pwyw/new-bi-monthly-39-fb?discount=25&upsellFlowId=fabulous_upsell_bundle_5apps_49_pdf_expert",
           "ctaColor": "#FFFFFF",
            "ctaBackgroundColor": "#251C93"
        }
    ],
    "logic": []
}