An enhanced numeric slider with a styled track, optional tick marks, and flexible value display. Ideal for bounded inputs where visitors explore a range visually.
In the builder: Elements → Form Widgets → Range Slider
Variable
| UI field |
Description |
| Name |
Variable name (required), e.g. num_videos, term_years. |
| Value |
Default slider position. |
Type
| Option |
Behavior |
| basic |
Slider only |
| with_ticks |
Tick marks on the track |
| with_value |
Shows current value |
| full |
Ticks and value display |
Min Value / Max Value / Step
Bounds and increment for the slider.
Slider Options
| UI field |
Description |
| Ticks |
No ticks / Ticks only / Ticks with labels |
| Tick step (optional) |
Spacing between tick marks |
| Max tick count |
Upper limit on number of ticks |
| Value position |
Hidden, next to label, above handle, inside handle, before/after track |
Field Option
| UI field |
Description |
| Label |
Label above the slider. |
| Status |
See Status below. |
| Format |
Number display format. |
| Decimal Places |
Display precision. |
| Prefix / Suffix |
Text or unit around the value. |
Status
| Value |
Behavior |
| Editable |
Visitor can type and change the value (default). |
| Readonly |
Value is visible and included in formulas, but the visitor cannot edit it. |
| Disabled |
Field is greyed out and inactive. The visitor cannot interact with it; use when the field should not apply in the current context. |
Validation
| UI field |
Options |
Purpose |
| Required |
Required / Optional |
Value required. |
| Min / Max |
Number |
Bounds (match Min Value / Max Value). |
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field |
Description |
| Show |
Always or Conditionally |
| Active mode is |
Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive |
Optional formula; evaluated on Calculate |
Design
Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.
| Part |
What it represents |
| Label |
Text above the slider. |
| Control Area |
Layout region for label and slider. |
| Slider Container |
Wrapper for track, handle, and ticks (.cp-range-slider). |
| Prefix |
Text/icon before the slider. |
| Suffix |
Unit after the value. |
| Track |
Background rail (.cp-range-track). |
| Slider Handle |
Draggable thumb (.cp-range-thumb). |
| Ticks |
Tick marks and labels (.cp-range-ticks). |
| Value |
Current value display (.cp-range-value). |
Custom CSS — useful selectors and classes:
| Selector / class |
Targets |
#cp-{ID} |
Entire widget (ID from the Element panel header). |
| Custom CSS Classes |
Classes you add in Design; applied to the outer widget container. |
.cp-range-slider |
Full slider component. |
.cp-range-track |
Track background. |
.cp-range-thumb |
Draggable handle. |
.cp-range-value |
Displayed value. |
= num_videos * avg_length * hourly_rate
Range Slider vs Number
|
Range Slider |
Number |
| Input style |
Slider control |
Typed number |
| Best for |
Visual tuning within a bounded range |
Exact amounts, wide ranges |
Use Range Slider when exploring a range feels natural (1–20 videos). Use Number for precise typed values (loan amount).