A native HTML range slider for choosing a numeric value within bounds. Simpler than Range Slider — no ticks or value labels.
In the builder: Elements → Form Widgets → Range
Widget Settings
Variable
| UI field | Description |
|---|---|
| Name | Variable name (required). |
| Value | Default slider position. |
Min Value / Max Value / Step
Set the slider bounds and increment.
Field Option
| UI field | Description |
|---|---|
| Label | Label above the slider. |
| Placeholder | Optional hint text. |
| Status | See Status below. |
| Format | Number display format. |
| Decimal Places | Precision for displayed value. |
| Prefix / Suffix | Text before/after 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. |
On Change
Attach actions when the slider moves.
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 | Region around the slider. |
| Range Slider | The slider track and handle (.slider-container, input[type=range]). |
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. |
.slider-container |
Slider wrapper. |
input[type=range] |
Native range input. |
Using the value in formulas
Reference Name like any numeric variable: = range_value * rate.
Range vs Range Slider
| Range | Range Slider | |
|---|---|---|
| Style | Native browser slider | Styled track, ticks, value display |
| Features | Basic min/max/step | Tick marks, value position, prefix/suffix |
| Best for | Simple bounded input | Polished calculators |
Use Range for a minimal slider. Use Range Slider for branded calculators with visible ticks and current value.