A single-file browser-based tool for visually splitting a total value into named, colored chunks using an interactive drag slider.
- Interactive slider — drag handles between segments to adjust percentages in real time
- Configurable chunks — set 2–20 named, color-coded chunks
- Lock/unlock chunks — lock individual chunks to prevent them from being adjusted when others change
- Direct input — edit each chunk's percentage or absolute value directly
- Custom colors — pick any color per chunk via a color picker
- Resizable slider — drag the edges of the slider bar to resize it horizontally or vertically
- Save/load presets — save named setups to
localStorageand reload them later - Overflow labels — narrow segments automatically pop their labels above the bar with connector lines and overlap resolution
- Responsive layout — chunk info boxes auto-arrange to avoid overlapping
Open percentage-splitter.html in any modern browser — no server or install required.
- Set the Total Value (e.g.
1000) - Set the Number of Chunks (2–20)
- Drag the white handles on the slider to adjust split percentages
- Rename chunks, change colors, or type values/percentages directly in the boxes below
- Lock a chunk with the 🔓 Lock button to pin its percentage while adjusting others
- Save your current setup with 💾 Save Current in the panel on the left; reload it any time
| Action | How |
|---|---|
| Set total value | Type in the Total Value field |
| Set chunk count | Type in the Number of Chunks field |
| Edit a percentage | Type in the Percent field of a chunk box, press Enter or Tab |
| Edit an absolute value | Type in the Value field of a chunk box, press Enter or Tab |
| Rename a chunk | Click the Name field in a chunk box |
| Change chunk color | Click the color swatch in a chunk box |
| Lock/unlock a chunk | Click the 🔓 Lock / 🔒 Locked button |
- Collapses/expands with the ▲/▼ toggle button
- Saved setups are stored in
localStorageunder the keypercentageSplitterSaves - Rename a save by clicking its name field
- Delete a save with the ✕ button
- Reload a save with the ↩ button
Works in any modern browser (Chrome, Firefox, Edge, Safari). No dependencies, no build step.