Range / Slider

Numeric track with one or two handles — satisfaction scales, NPS 0–10, budget bands, and intervals. Bounds use rangeMin, rangeMax, and rangeStep (not validation.min/max).

Overview

The Range field renders a draggable numeric slider. Respondents drag along a bounded track instead of typing — ideal for subjective scales, relative budgets, and quick magnitude questions on mobile.

Configure the numeric track with rangeMin, rangeMax, and rangeStep. Optional captions rangeMinLabel / rangeMaxLabel anchor the ends (for example “Poor” / “Excellent”).

Note: Do not use validation.min / validation.max for slider bounds — they apply to number fields, not the range control.

Modes

Single thumb — default rangeMode single. One numeric answer.
Interval — set rangeMode to range for two handles; the answer is a low/high pair inside the same track.

Properties

Note: Builder exports include a UUID id per field; submission payloads use those ids as keys.

Property	Type	Default	Description
id	string	—	Unique field identifier.
type	string	"range"	Discriminator.
label	string	—	Human-readable label shown above the field or step heading.
required	boolean	false	When true, the form cannot submit without a value.
isHidden	boolean	false	Hides the field from respondents (may still store defaults).
isDisabled	boolean	false	Renders the field read-only.
instruction	string	undefined	Help text shown below the label (not the same as placeholder).
rangeMode	"single" \| "range"	"single"	One value vs two-handle interval.
rangeMin	number	0	Minimum value on the track (renderer default if omitted: 0).
rangeMax	number	100	Maximum value on the track (renderer default if omitted: 100).
rangeStep	number	1	Step between valid values.
rangeMinLabel	string	undefined	Optional label shown at the minimum end.
rangeMaxLabel	string	undefined	Optional label shown at the maximum end.
instruction	string	undefined	Help text below the label.
reporting	object	undefined	Admin table hints: includeInTable, labelOverride, sortable, filterable.
integrationKey	string	undefined	Stable key for integrations.

JSON examples

Single-thumb scale (export shape)

{
  "name": "Survey",
  "weightage": 0,
  "fields": [
    {
      "id": "c3e516aa-2a7e-43c4-ab8f-42c1cade8d20",
      "type": "range",
      "label": "Satisfaction",
      "required": true,
      "isHidden": false,
      "placeholder": "Enter range...",
      "rangeMode": "single",
      "rangeMin": 1,
      "rangeMax": 10,
      "rangeStep": 1,
      "rangeMinLabel": "Poor",
      "rangeMaxLabel": "Excellent"
    }
  ]
}

Dual-handle interval

Use rangeMode range when you need a budget band or acceptable min–max window on the same slider.

{
  "id": "budget-band",
  "type": "range",
  "label": "Preferred budget (USD)",
  "required": false,
  "rangeMode": "range",
  "rangeMin": 0,
  "rangeMax": 100,
  "rangeStep": 5,
  "rangeMinLabel": "Min",
  "rangeMaxLabel": "Max"
}

Stored value

Single: a number. Range: a tuple [low, high] (two numbers, low ≤ high), both within rangeMin / rangeMax.

Use cases

NPS-style 0–10 or Likert-style 1–5 sliders with end labels
Donation or budget ranges with dual handles for acceptable intervals
Quick “how likely are you to…?” probability without numeric keyboards
Volume, urgency, or risk where position on a track is the insight

PreviousDate Picker

NextRating