A Frontify guideline block that renders one or more interactive range sliders. Editors drag a handle along a styled track and see the chosen value update live. Each slider row has optional min/max endpoint labels, an inline text label, and a numeric percentage input — all configurable without leaving the page.
| Feature | Detail |
|---|---|
| Multiple rows | Add or remove slider rows in edit mode |
| Min / Max labels | Free-text endpoint labels per row |
| Inline label | Optional descriptor shown beneath the track |
| Value label toggle | Show/hide the live percentage below the handle |
| Direct % input | Type a number (0–100) in edit mode to jump the handle |
| Line style | Round or Square ends; height up to 90 px; fully branded colour |
| Fill colour | Separate colour for the filled (active) portion of the track |
| Indicator style | Circle, Square, or Bar handle; independent size and colour |
| Text colour | Single colour applied to all labels and endpoint text |
In edit mode each row exposes inline Min / Max text inputs, a Label field, a 0–100 percentage input, and a delete button. A global Add a new row button appends a fresh slider at the default value of 50.
All visual settings live in the Frontify sidebar under Style: line shape + height + colour, fill colour, indicator shape + size + colour, text colour, and the value-label toggle.
- Node.js 22 (see
.nvmrc; runnvm useto switch automatically) - A Frontify account with a guideline page you can edit (for live testing)
@frontify/frontify-cli— installed as a dev dependency; no global install required
npm install
npm run servefrontify-cli serve starts a local dev server and hot-reloads the block inside Frontify. Open the Frontify guideline page, add a Dev Block, and point it at the local server URL printed in the terminal.
Other commands:
npm run typecheck # TypeScript check, no emit
npm run lint # ESLint
npm run lint:fix # ESLint with auto-fix
npm run deploy # Publish to Frontify- Run
npm run serveand copy the local server URL. - In Frontify, open a guideline page in edit mode.
- Add a content block → choose Dev Block → paste the local URL.
- The block loads live. Changes to
src/hot-reload without a page refresh. - Use the sidebar Style panel to verify all styling options.
zustand is not imported directly in src/. It is listed under peerDependencies because @frontify/fondue pulls it in transitively via @frontify/fondue-rte → @udecode/plate-core, and the host app must share a single instance. Removing it can cause version conflicts at runtime even though no import appears in this codebase.