Range Slider Results

A step that shows the user’s answer as the gradient bar. It was built to show the [Question Range Slider](Question Range Slider) step answer.

rangeSliderResults example

{
    "type": "rangeSliderResults",
    "stepId": "slider_result_2",
    "title": "We call this your",
    "subtitle": "Past Routine Adherence",
    "textColor": "#FFF",
    "backgroundColor": "#1D0D70",
    "ctaColor": "#130a7e",
    "ctaText": "Continue",
    "ctaBackgroundColor": "#fff",
    "questionStepId": "slider_2",
    "animationSeconds": 300,
    "paragraphs": [
        "<p style='color:#DCD6F3'>So your past <b style='color:#FFF;'>Adherence</b> is <span style='color:#FFF;'><b> {{ANSWER|slider_2}}%</b></span>.</p>",
        "<p style='color:#DCD6F3;'>It's encouraging to see that you're already incorporating certain practices! Having room for improvement is fantastic!</p>",
        "<p><i><b>So, let’s talk about the future, and set some goals!</b></i></p>"
    ],
    "useHTML": true,
    "resultsBar": {
        "textColor": "#FFF",
        "backgroundColor": "rgba(255, 255, 255, 0.1",
        "activeBackground": "linear-gradient(90deg, #F64F59 0%, #FFB27A 34.5%, #C471ED 68%, #689BEB 100%)"
    }
}

Key	Notes
type	rangeSliderResults
stepId	Unique step id
title	The step title
subtitle	The step subtitle
paragraphs	The paragraphs to show after the gradient bar (note: the useHTML key must be true in this step we wanted to add inlined HTML to the paragraphs) "paragraphs": [     `"<p style='color:#DCD6F3'>So your past <b style='color:#FFF;'>Adherence</b> is <span style='color:#FFF;'><b> {{ANSWER
useHTML	true or false value to allow us to show inline HTML.
animationSeconds	The milliseconds of delay in showing the text on the step.
resultsBar	The styles needed for the gradient bar: "resultsBar": {    "textColor": "#FFF",    "backgroundColor": "rgba(255, 255, 255, 0.1",    "activeBackground": "linear-gradient(90deg, #F64F59 0%, #FFB27A 34.5%, #C471ED 68%, #689BEB 100%)" }
key	That key is used to save the user’s answers to be used later on the checkout pages. The supported keys for that steps are: adherence_now, adherence_past, and adherence_future. > [!WARNING] These are the only supported keys for that step that can be used to show the user’s results on this checkout page.
backgroundColor
textColor	The main text color on the page
ctaText	The text of the main button
ctaColor	The text color of the main button
ctaBackgroundColor	The background color of the main button
defaultValue	Three ways to set the defaultValue of the step: You can get that value in the onboarding logic using the getDefaultValue function. The user’s answers based on previous steps and displayed as the result (check questionStepId) Or you can add a numeric value directly (e.g., defaultValue:40) to set the bar to a static value. > [!IMPORTANT] The priority of values follows the same order: we first check whether the value is set directly in the logic. If not, we determine whether it should be based on previous steps. Finally, we check the defaultValue in the step.
questionStepId	Optional, and it can be used to set the slider range value based on the user’s answer to the step with the ID equal to questionStepId