Appearance
Slider Styling
Style every visual detail of a Slider — the track, the drag handle, step ticks, end labels, and how the current value is shown — using per-type templates.
Overview
Read Types Settings first if you haven't created a template before. In the Style Settings modal this type is labeled Slider.
The editor's left navigation has 6 tabs, in this order: Slider style, Track, Thumb, Current value, Responsive, Advanced — matching the sections below.
The range isn't here
Lowest value, Highest value, Step, Default value, and Unit belong to the option itself, not the template — configure them on the option's Slider card (see Slider). Every value the template displays composes {value} {unit} from that configuration automatically.
Slider Style
The master preset. It decides the overall look and gates which fields appear in the rest of the editor — the track-height field, the thumb block, the tick settings, and which label controls you get.
| Setting | Options (default) | What it controls |
|---|---|---|
| Slider style | Classic (default) / Thick / Stepped | Classic = thin track with a round handle. Thick = a tall bar with a grip. Stepped = a thin track with a tick at each step |
Stepped only
These reveal directly below the style picker when Stepped is selected.
| Setting | Options (default) | What it controls |
|---|---|---|
| Tick style | Dots (default) / Lines | Shape of the step marks along the track |
| Tick color | color (#CBD5E1) | Color of the ticks |
| Show step labels | toggle (off) | Prints the value under each tick. Help text in-app: Show a value label under each tick (hidden for large ranges) |
| Label font size | 8–16px (12px) | Size of the step-label text — only when Show step labels is on |
| Label color | color (#94A3B8, falls back to the Global text color) | Color of the step-label text — only when Show step labels is on |
Tick color isn't tied to your theme
Every other color here seeds from your Global palette, but Tick color deliberately doesn't. The track already uses your Global input-border color, so a theme-linked tick would come out the same color as the track it sits on — invisible. Ticks stay a fixed contrasting grey instead.
Ticks and step labels are thinned, on purpose
A 0–1000 slider with step 1 describes 1001 stops; drawing one mark each would be an unreadable wall. So:
- Ticks are capped at 21, evenly spaced, always including both ends
- Step labels are capped at 10, and thinned further to whatever actually fits the measured track width — a long unit or a narrow preview gets fewer
Every mark that does get drawn sits on a real, selectable step, and the gaps stay equal. If you want a tick per value, keep the range to roughly 20 stops or fewer.
Stepped has no "Show min & max" toggle
Step labels always include both endpoints, so the min and max are shown inherently. When Show step labels is on, the plain min/max row is suppressed to avoid printing the same two numbers twice.
Classic and Thick only
| Setting | Options (default) | What it controls |
|---|---|---|
| Show min & max labels | toggle (on) | Shows the lowest and highest values at the two ends of the track |
| Label font size | 8–16px (12px) | Size of the min/max text — only when the toggle is on |
| Label color | color (#94A3B8, falls back to the Global text color) | Color of the min/max text — only when the toggle is on |
Track
The bar the handle slides along.
| Setting | Options (default) | What it controls |
|---|---|---|
| Track height | 2–12px (6px) — Classic and Stepped | Thickness of the track |
| Track height | 14–40px (20px) — Thick only | Thickness of the thick bar. Stored separately from the Classic/Stepped height, so each preset keeps its own value when you switch back and forth |
| Track color | color (#E5E7EB, falls back to the Global input border color) | The unfilled part of the track |
| Fill color | color, transparent allowed (#2563EB, falls back to the Global button color) | The filled part, from the lowest value up to the handle |
| Track corner radius | 0–20px (6px) | Rounding of the track ends |
Two shortcuts worth knowing
Transparent Fill color removes the fill entirely — there's no separate "show fill" toggle, the color field does both jobs.
Track corner radius is clamped to half the track height. At the default 6px height, anything above 3px reads identically as a pill. Raise the track height first if you want a visibly squarer or rounder track.
Thumb
The draggable handle. Which block you get depends on the Slider style.
Classic and Stepped
| Setting | Options (default) | What it controls |
|---|---|---|
| Thumb shape | Circle (default) / Square | Shape of the handle — Square renders as a gently rounded box |
| Thumb size | 12–32px (18px) | Handle width and height |
| Thumb color | color (#FFFFFF) | Handle fill |
| Thumb border color | color (#2563EB, falls back to the Global button color) | Handle ring color |
| Thumb border width | 0–4px (2px) | Handle ring thickness |
| Thumb shadow | None / Soft (default) / Medium | Drop shadow under the handle |
Thumb border follows the fill until you touch it
On a template where you've never set Thumb border color, the ring tracks whatever Fill color is — so a fresh template reads as one accent instead of a hardcoded blue ring on a recolored track. The moment you set the field explicitly, it stops following.
Thick
| Setting | Options (default) | What it controls |
|---|---|---|
| Thumb | None / Grip (default) / Circle | The handle drawn on the thick bar. None removes it, leaving just the filled bar |
| Thumb color | color (#FFFFFF) | Handle fill — hidden when Thumb is set to None |
The grip's shape and size are fixed; only its color is configurable.
Current Value
How the customer's chosen number is displayed.
| Setting | Options (default) | What it controls |
|---|---|---|
| Value display | Tooltip (default) / Number box / None | Tooltip = a bubble above the handle. Number box = an editable field beside the track. None = no readout at all. The fields below switch with this |
Tooltip
| Setting | Options (default) | What it controls |
|---|---|---|
| Tooltip visibility | While sliding (default) / Always | Show the bubble only during interaction, or permanently |
| Tooltip background | color (#1A1A1A) | Bubble fill (the arrow follows it) |
| Tooltip text color | color (#FFFFFF) | Bubble text color |
| Tooltip font size | 10–18px (13px) | Bubble text size |
"While sliding" includes keyboard focus
The bubble appears while dragging and whenever the track has keyboard focus — so customers arrowing through values still see what they've landed on.
Number box
| Setting | Options (default) | What it controls |
|---|---|---|
| Input width | 48–120px (64px) | Width of the number field |
| Input background | color, transparent allowed (#FFFFFF, falls back to the Global input background) | Field fill |
| Input border color | color (#E2E8F0, falls back to the Global input border color) | Field border color |
| Input text color | color (#111827, falls back to the Global text color) | Number color |
| Input font size | 10–20px (14px) | Number size |
| Input corner radius | 0–16px (8px, falls back to the Global input radius) | Field corner rounding |
Input width has a floor
The number box never shrinks below what the widest value in the range needs. Set Input width to 48px on a -1000 to 1000 slider and the field still renders wide enough to show the number — the setting raises the width, it can't truncate the value.
Customers can type directly into the number box. Out-of-range or off-step entries snap to the nearest valid value when they press Enter or click away, rather than being rejected.
Responsive
| Setting | Options (default) | What it controls |
|---|---|---|
| Mobile thumb size | 16–40px (empty) | Overrides the handle size on screens 600px wide and under, so it's easier to grab. Leave empty to reuse the desktop size |
Only applies to the Classic and Stepped handle
Mobile thumb size targets the round/square thumb. The Thick preset's grip has a fixed, code-owned size and ignores this setting.
Advanced
| Setting | Options (default) | What it controls |
|---|---|---|
| Focus outline color | color (#3B82F6) | The keyboard-focus ring color |
| Focus outline width | 1–4px (2px) | Focus ring thickness |
| Disabled opacity | 0–100% (50%) | How faded the slider looks while it's disabled |
The focus ring lands on the handle, or on the whole track when the Thick preset has its thumb set to None. It can't be turned off — only recolored and resized.
How to Style a Slider
- Open the Style Settings modal (see Customization Overview)
- Click Types → Slider
- Create a new template or click an existing one to edit it
- Pick a Slider style first — it determines which fields the rest of the editor shows
- Use the left navigation to jump between Slider style, Track, Thumb, Current value, Responsive, and Advanced
- Click Manage preview above the Live Preview to set a test range — see Sandbox & Live Preview
- Click Save in the contextual save bar
Preview a range that shows off your preset
The Sandbox's default preview range is 0–100 with step 10 — eleven stops, which renders visible ticks on the Stepped preset. A finer step would push past the tick cap and make Stepped look identical to Classic.
Related
- Slider (option type) — how to add a Slider and configure its range, step, default, and unit
- Types Settings — how templates work and how to assign one to an option
- Sandbox & Live Preview — set a test range while styling
- Accordion Styling
- Checkbox Styling
- Radio Styling
- Swatches Styling
- Tabs Styling
- File Upload Styling