{"schemaVersion":"2.0.0","defaultLanguage":"en","languages":["en"],"launchScreenId":"article_screen_help-block-roller","screens":{"article_screen_help-block-roller":{"id":"article_screen_help-block-roller","name":"Roller — all settings","tags":["article"],"screenType":"FlexibleLayout","position":{"x":0,"y":0},"content":{"canvas":{"background":{"kind":"solid","content":{"color":"#F7F8FA"}},"insets":{"top":0,"end":0,"bottom":0,"start":0},"webViewBackgroundColor":"#F7F8FA"},"animated":false,"offlineFirst":true,"flexibleLayout":{"scrollable":true,"insets":{"top":44,"end":28,"bottom":56,"start":28},"sections":[{"id":"intro","order":0,"kind":"Text","label":"Intro","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Roller — every setting"},"kind":"static","appearance":{"align":"start","fontSize":28,"fontWeight":800,"lineHeight":34,"color":"#101828"}},"subtitle":{"translations":{"en":"A spinning wheel picker — the data type, the wheels and their values (text lists or number ranges), the selected-value label styling, and the picker container’s background, borders, corner radius and padding. This guide documents every setting of the Roller block, grouped by area. Each setting matches a real control in the screen editor."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":400,"lineHeight":26,"color":"#475467"}}}},{"id":"section-context","order":1,"kind":"Media","label":"Roller in the editor","layout":{"heightKind":"fixed","heightValue":360,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/context-section.png","name":"The screen editor with the Roller section highlighted."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"section-context-cap","order":2,"kind":"Text","label":"Context caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Open the Roller section in the screen editor to configure its settings."},"kind":"static","appearance":{"align":"start","fontSize":13,"fontWeight":500,"lineHeight":19,"color":"#667085"}}}},{"id":"article-first-applies-to","order":3,"kind":"Text","label":"Applies to","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Applies to: Wheel Picker screens."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":25,"color":"#344054"}}}},{"id":"g-wheels-head","order":4,"kind":"Text","label":"Group: Wheels & values","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Wheels & values"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-roller-content-roller-datatype","order":5,"kind":"Text","label":"Wheels & values · Text choices or numbers","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Text choices or numbers"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Chooses what the picker collects: String for text choices, which allows up to 5 side-by-side wheels (such as month / day / year), or Integer for a single numeric range (such as age or quantity). Set this first — it limits Integer to one wheel, unlocks up to five wheels for String, and changes how each wheel's options are set up below."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-datatype-img","order":6,"kind":"Media","label":"Text choices or numbers","layout":{"heightKind":"fixed","heightValue":120,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-data-type.png","name":"Where to find “Text choices or numbers” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-separator","order":7,"kind":"Text","label":"Wheels & values · Joiner between wheel values","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Joiner between wheel values"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"The character or characters used to join selections from multiple wheels into one combined value — for example '/' turns two wheels into 'Large/Red', or a space joins them with a gap. This only matters when you have more than one wheel; leave it as-is for a single-wheel picker. Choose a separator that reads naturally in the answer you'll store and reuse later in the funnel."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-separator-img","order":8,"kind":"Media","label":"Joiner between wheel values","layout":{"heightKind":"fixed","heightValue":120,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-separator.png","name":"Where to find “Joiner between wheel values” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-wheels","order":9,"kind":"Text","label":"Wheels & values · Add and set up wheels","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Add and set up wheels"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"The spinning wheels users scroll to make their choice. Each wheel is either a List of text options or a Range of numbers; use Add Wheel to add more (up to 5 with the String data type, only 1 with Integer), then expand a wheel to set its type, options, and starting value. Each wheel's selection is saved as a variable you can reuse later for personalized copy or to route users down different paths."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-wheels-img","order":10,"kind":"Media","label":"Add and set up wheels","layout":{"heightKind":"fixed","heightValue":124,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheels.png","name":"Where to find “Add and set up wheels” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-wheels-n-kind","order":11,"kind":"Text","label":"Wheels & values · List of options or number range","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"List of options or number range"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets how this wheel's values are built: List means you type each option yourself (sizes, labels, months), while Range means you set a from/to span and the wheel fills in every number between, such as 1 to 10. Use List for arbitrary text choices and Range for evenly-spaced numbers. Note that switching between them clears the options you've already entered for this wheel."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-wheels-n-kind-img","order":12,"kind":"Media","label":"List of options or number range","layout":{"heightKind":"fixed","heightValue":120,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-kind.png","name":"Where to find “List of options or number range” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-wheels-n-options-localizedoptions-locale","order":13,"kind":"Text","label":"Wheels & values · Edit the wheel's choices","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Edit the wheel's choices"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"The text choices shown on a List-mode wheel. Add, edit, drag to reorder, or delete options (1-20 allowed). The order here is the order users scroll through, so place the most common choices near the top where the starting value lands. Each option is per-language, so translate them if your funnel runs in more than one language."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-wheels-n-options-localizedoptions-locale-img","order":14,"kind":"Media","label":"Edit the wheel's choices","layout":{"heightKind":"fixed","heightValue":533,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-options.png","name":"Where to find “Edit the wheel's choices” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-wheels-n-options-from","order":15,"kind":"Text","label":"Wheels & values · Lowest number on the wheel","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Lowest number on the wheel"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"The smallest number a Range-mode wheel starts at. Together with the 'to' value it sets the span users can scroll — for example from 1 to 10 lets them pick any number from 1 through 10. Keep this lower than 'to', and set it to the smallest realistic answer for your question, such as a minimum age or quantity."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-wheels-n-options-from-img","order":16,"kind":"Media","label":"Lowest number on the wheel","layout":{"heightKind":"fixed","heightValue":143,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-from.png","name":"Where to find “Lowest number on the wheel” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-wheels-n-options-to","order":17,"kind":"Text","label":"Wheels & values · Highest number on the wheel","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Highest number on the wheel"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"The largest number a Range-mode wheel ends at. Together with the 'from' value it sets the span users can scroll — for example from 1 to 10 lets them pick any number from 1 through 10. Keep this higher than 'from', and set it to the largest realistic answer for your question so users aren't offered absurd values."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-wheels-n-options-to-img","order":18,"kind":"Media","label":"Highest number on the wheel","layout":{"heightKind":"fixed","heightValue":143,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-to.png","name":"Where to find “Highest number on the wheel” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-wheels-n-defaultvalue-locale","order":19,"kind":"Text","label":"Wheels & values · Pre-selected starting value","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Pre-selected starting value"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"The value already showing when the screen loads. For List wheels, pick one of your options; for Range wheels, pick any number within the from/to span. Pre-selecting the most common answer reduces friction and prevents accidental empty or extreme submissions — leave it empty only if you truly want nothing chosen up front."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-wheels-n-defaultvalue-locale-img","order":20,"kind":"Media","label":"Pre-selected starting value","layout":{"heightKind":"fixed","heightValue":143,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-default.png","name":"Where to find “Pre-selected starting value” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-label-head","order":21,"kind":"Text","label":"Group: Selection label styles","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Selection label styles"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-roller-content-roller-labelappearance-fontsize","order":22,"kind":"Text","label":"Selection label styles · Size of the selection label","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Size of the selection label"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Text size of the label that shows the user's current choice above the wheels (0-50, default 18). 16-22 keeps the chosen value clearly readable; very small or 0 effectively hides it. Increase it when you want the selection to stand out as a confirmation of what the user picked."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-labelappearance-fontsize-img","order":23,"kind":"Media","label":"Size of the selection label","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-label-font-size.png","name":"Where to find “Size of the selection label” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-labelappearance-fontweight","order":24,"kind":"Text","label":"Selection label styles · Thickness of the label text","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Thickness of the label text"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"How heavy the selection label looks, from 300 (Light) to 900 (Black); default 400 (Regular). Use 600-700 (Semibold/Bold) to make the chosen value read as a clear confirmation, or keep it at 400 if it should sit quietly above the wheels. Match it to the weight of your other body text for a consistent look."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-labelappearance-fontweight-img","order":25,"kind":"Media","label":"Thickness of the label text","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-label-font-weight.png","name":"Where to find “Thickness of the label text” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-labelappearance-color","order":26,"kind":"Text","label":"Selection label styles · Color of the selection label","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Color of the selection label"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Color of the label text that shows the user's current choice above the wheels (default black, #000000). Pick a color with strong contrast against the container background so the chosen value stays easy to read, ideally your theme's main text color for consistency. This affects only the label, not the wheel options themselves."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-labelappearance-color-img","order":27,"kind":"Media","label":"Color of the selection label","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-label-color.png","name":"Where to find “Color of the selection label” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-labelappearance-align","order":28,"kind":"Text","label":"Selection label styles · Where the label sits","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Where the label sits"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Horizontal position of the selection label within its container: left, center, or right (default center). Center usually lines up with the centered wheels and is the safe choice; switch to left or right only to align the label with other text or a specific layout. This is purely visual and does not change the value the user selected."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-labelappearance-align-img","order":29,"kind":"Media","label":"Where the label sits","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-label-align.png","name":"Where to find “Where the label sits” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-container-head","order":30,"kind":"Text","label":"Group: Picker container styles","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Picker container styles"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-roller-content-roller-appearance-backgroundcolor","order":31,"kind":"Text","label":"Picker container styles · Background behind the wheels","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Background behind the wheels"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Fill color behind the spinning wheels (default white, #ffffff). Choose a color that contrasts enough with the screen background so the picker reads as its own distinct card and the wheel values stay legible. A subtle off-white or light tint often separates the picker from the page better than pure white."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-appearance-backgroundcolor-img","order":32,"kind":"Media","label":"Background behind the wheels","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-bg-color.png","name":"Where to find “Background behind the wheels” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-appearance-borders-width","order":33,"kind":"Text","label":"Picker container styles · Thickness of the picker outline","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Thickness of the picker outline"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Width in pixels of the outline around the picker container (0-50, default 1). Set it to 0 for no border and rely on the background color alone, or use 1-2px for a clean, defined edge. The border color setting below only takes effect when this is greater than 0."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-appearance-borders-width-img","order":34,"kind":"Media","label":"Thickness of the picker outline","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-border-width.png","name":"Where to find “Thickness of the picker outline” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-appearance-borders-color","order":35,"kind":"Text","label":"Picker container styles · Color of the picker outline","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Color of the picker outline"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Color of the outline around the picker container (default light gray, #E0E0E0). Use a light neutral for a subtle card edge, or your accent color to make the picker stand out on the screen. It only shows when the border thickness above is greater than 0."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-appearance-borders-color-img","order":36,"kind":"Media","label":"Color of the picker outline","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-border-color.png","name":"Where to find “Color of the picker outline” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-appearance-borders-radius-uniform","order":37,"kind":"Text","label":"Picker container styles · Roundness of the corners","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Roundness of the corners"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"How rounded the four corners of the picker container are, in pixels (0-50, default 12). 0 gives sharp square corners; higher values look softer and more modern. Match it to the corner roundness of your buttons and other cards so the whole funnel feels consistent."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-appearance-borders-radius-uniform-img","order":38,"kind":"Media","label":"Roundness of the corners","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-border-radius.png","name":"Where to find “Roundness of the corners” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-roller-content-roller-appearance-insets","order":39,"kind":"Text","label":"Picker container styles · Space inside the picker","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Space inside the picker"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the empty space, in pixels, inside the picker container on each side: top, right, bottom, left, between the border and the spinning wheels. The default is usually a small value; increase it to give the wheels breathing room, or keep it tight for a compact picker. A clean, uncluttered picker feels effortless to use, which helps visitors commit their answer and continue through the funnel."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-roller-content-roller-appearance-insets-img","order":40,"kind":"Media","label":"Space inside the picker","layout":{"heightKind":"fixed","heightValue":218,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-container-padding.png","name":"Where to find “Space inside the picker” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}}]}}}},"metadata":{"kind":"article","alias":"help-block-roller","articlePresentation":{"version":1,"profiles":{"standard":{"containerMaxWidth":640,"contentInsets":{"top":44,"end":28,"bottom":56,"start":28},"sectionPaddingScale":1,"textScale":1},"laptop":{"containerMaxWidth":620,"contentInsets":{"top":40,"end":28,"bottom":52,"start":28},"sectionPaddingScale":0.98,"textScale":0.98},"tablet":{"containerMaxWidth":560,"contentInsets":{"top":36,"end":24,"bottom":44,"start":24},"sectionPaddingScale":0.94,"textScale":0.95},"phone":{"containerMaxWidth":"100%","contentInsets":{"top":28,"end":16,"bottom":36,"start":16},"sectionPaddingScale":0.86,"textScale":0.9,"titleTextScale":0.86}}},"settingsMap":[{"fieldKey":"content.roller.dataType","title":"Text choices or numbers","sectionType":"roller","group":"wheels","guideKey":"screenedit-roller-data-type","editorTestId":"roller-data-type-select","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-data-type.png","articleSectionId":"set-roller-content-roller-datatype","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"control","humanInstruction":"Find “Text choices or numbers”.","postconditionTestId":"roller-data-type-select"}]},{"fieldKey":"content.roller.separator","title":"Joiner between wheel values","sectionType":"roller","group":"wheels","guideKey":"screenedit-roller-separator","editorTestId":"roller-separator-input","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-separator.png","articleSectionId":"set-roller-content-roller-separator","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"control","humanInstruction":"Find “Joiner between wheel values”.","postconditionTestId":"roller-separator-input"}]},{"fieldKey":"content.roller.wheels","title":"Add and set up wheels","sectionType":"roller","group":"wheels","guideKey":"screenedit-roller-wheels","editorTestId":"roller-wheels-header","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheels.png","articleSectionId":"set-roller-content-roller-wheels","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"control","humanInstruction":"Find “Add and set up wheels”.","postconditionTestId":"roller-wheels-header"}]},{"fieldKey":"content.roller.wheels.N.kind","title":"List of options or number range","sectionType":"roller","group":"wheels","guideKey":"screenedit-roller-wheel-kind","editorTestId":"roller-wheel-0-kind","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-kind.png","articleSectionId":"set-roller-content-roller-wheels-n-kind","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"control","humanInstruction":"Find “List of options or number range”.","postconditionTestId":"roller-wheel-0-kind"}]},{"fieldKey":"content.roller.wheels.N.options.localizedOptions.{locale}","title":"Edit the wheel's choices","sectionType":"roller","group":"wheels","guideKey":"screenedit-roller-options","editorTestId":"roller-wheel-0-options","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-options.png","articleSectionId":"set-roller-content-roller-wheels-n-options-localizedoptions-locale","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"control","humanInstruction":"Find “Edit the wheel's choices”.","postconditionTestId":"roller-wheel-0-options"}]},{"fieldKey":"content.roller.wheels.N.options.from","title":"Lowest number on the wheel","sectionType":"roller","group":"wheels","guideKey":"screenedit-roller-range-from","editorTestId":"roller-wheel-1-from","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-from.png","articleSectionId":"set-roller-content-roller-wheels-n-options-from","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"control","humanInstruction":"Find “Lowest number on the wheel”.","postconditionTestId":"roller-wheel-1-from"}]},{"fieldKey":"content.roller.wheels.N.options.to","title":"Highest number on the wheel","sectionType":"roller","group":"wheels","guideKey":"screenedit-roller-range-to","editorTestId":"roller-wheel-1-to","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-to.png","articleSectionId":"set-roller-content-roller-wheels-n-options-to","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"control","humanInstruction":"Find “Highest number on the wheel”.","postconditionTestId":"roller-wheel-1-to"}]},{"fieldKey":"content.roller.wheels.N.defaultValue.{locale}","title":"Pre-selected starting value","sectionType":"roller","group":"wheels","guideKey":"screenedit-roller-default-value","editorTestId":"roller-wheel-0-default","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/open-section-wheel-default.png","articleSectionId":"set-roller-content-roller-wheels-n-defaultvalue-locale","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"control","humanInstruction":"Find “Pre-selected starting value”.","postconditionTestId":"roller-wheel-0-default"}]},{"fieldKey":"content.roller.labelAppearance.fontSize","title":"Size of the selection label","sectionType":"roller","group":"label","guideKey":"screenedit-roller-label-font-size","editorTestId":"field-content.roller.labelAppearance.fontSize","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-label-font-size.png","articleSectionId":"set-roller-content-roller-labelappearance-fontsize","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Size of the selection label”.","postconditionTestId":"field-content.roller.labelAppearance.fontSize"}]},{"fieldKey":"content.roller.labelAppearance.fontWeight","title":"Thickness of the label text","sectionType":"roller","group":"label","guideKey":"screenedit-roller-label-font-weight","editorTestId":"field-content.roller.labelAppearance.fontWeight","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-label-font-weight.png","articleSectionId":"set-roller-content-roller-labelappearance-fontweight","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Thickness of the label text”.","postconditionTestId":"field-content.roller.labelAppearance.fontWeight"}]},{"fieldKey":"content.roller.labelAppearance.color","title":"Color of the selection label","sectionType":"roller","group":"label","guideKey":"screenedit-roller-label-text-color","editorTestId":"field-content.roller.labelAppearance.color","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-label-color.png","articleSectionId":"set-roller-content-roller-labelappearance-color","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Color of the selection label”.","postconditionTestId":"field-content.roller.labelAppearance.color"}]},{"fieldKey":"content.roller.labelAppearance.align","title":"Where the label sits","sectionType":"roller","group":"label","guideKey":"screenedit-roller-label-text-align","editorTestId":"field-content.roller.labelAppearance.align","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-label-align.png","articleSectionId":"set-roller-content-roller-labelappearance-align","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Where the label sits”.","postconditionTestId":"field-content.roller.labelAppearance.align"}]},{"fieldKey":"content.roller.appearance.backgroundColor","title":"Background behind the wheels","sectionType":"roller","group":"container","guideKey":"screenedit-roller-container-background-color","editorTestId":"field-content.roller.appearance.backgroundColor","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-bg-color.png","articleSectionId":"set-roller-content-roller-appearance-backgroundcolor","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Background behind the wheels”.","postconditionTestId":"field-content.roller.appearance.backgroundColor"}]},{"fieldKey":"content.roller.appearance.borders.width","title":"Thickness of the picker outline","sectionType":"roller","group":"container","guideKey":"screenedit-roller-border-width","editorTestId":"field-content.roller.appearance.borders.width","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-border-width.png","articleSectionId":"set-roller-content-roller-appearance-borders-width","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Thickness of the picker outline”.","postconditionTestId":"field-content.roller.appearance.borders.width"}]},{"fieldKey":"content.roller.appearance.borders.color","title":"Color of the picker outline","sectionType":"roller","group":"container","guideKey":"screenedit-roller-border-color","editorTestId":"field-content.roller.appearance.borders.color","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-border-color.png","articleSectionId":"set-roller-content-roller-appearance-borders-color","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Color of the picker outline”.","postconditionTestId":"field-content.roller.appearance.borders.color"}]},{"fieldKey":"content.roller.appearance.borders.radius.uniform","title":"Roundness of the corners","sectionType":"roller","group":"container","guideKey":"screenedit-roller-border-radius","editorTestId":"field-content.roller.appearance.borders.radius.uniform","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-border-radius.png","articleSectionId":"set-roller-content-roller-appearance-borders-radius-uniform","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Roundness of the corners”.","postconditionTestId":"field-content.roller.appearance.borders.radius.uniform"}]},{"fieldKey":"content.roller.appearance.insets","title":"Space inside the picker","sectionType":"roller","group":"container","guideKey":"screenedit-roller-container-padding","editorTestId":"padding-content.roller.appearance.insets","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-roller-section/0.2.0/configure-roller-section-2026-06-24T19-15-42-171Z-c26bba20/gear-container-padding.png","articleSectionId":"set-roller-content-roller-appearance-insets","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Wheel Picker screen and find the Roller section (set the data type, separator, and wheels at the top).","postconditionTestId":"roller-data-type-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the data type), then expand the Label styles and Container styles subsections.","postconditionTestId":"style-settings-button"},{"to":"control","humanInstruction":"Find “Space inside the picker”.","postconditionTestId":"padding-content.roller.appearance.insets"}]}],"projectId":"arswew63RwQr6V4Ekb1Z","articleId":"help-block-roller"},"webViewDefaultBackgroundColor":"#F7F8FA","projectAnalytics":{"consentManagement":{"enabled":true,"bannerText":"We use cookies to improve your experience and analyze site usage.","privacyPolicyUrl":"","defaultConsent":"denied"},"integrations":[{"platform":"segmently_internal","name":"Segmently Analytics","enabled":true,"config":{"mode":"http"},"createdAt":"2026-05-26T13:53:00.398Z","updatedAt":"2026-05-26T13:53:00.398Z","id":"int_mpmp3jsm_aij2kz"}]}}