📢 New Addon: Range Controls – Discover layout issues with sliders (feedback welcome!)

[silverbirder]

Hi everyone 👋

I’ve built a new Storybook addon called Range Controls.
It lets you adjust story args (strings, numbers, arrays) with sliders, making it easy to stress-test your UI and discover layout issues.

It was inspired by the built-in argTypes with type: "range", but aims to make this kind of control more flexible and easier to use.

🚀 Demo

👉 Live Demo on Chromatic

Card List	Range Controls Panel

📦 Installation

npm install --save-dev storybook-addon-range-controls

Then register it in .storybook/main.js:

addons: [
  "@storybook/addon-docs",
  "storybook-addon-range-controls",
];

⚙️ Usage

Define the range parameter in your stories:

parameters: {
  range: {
    title: { type: "string", min: 0, max: 50, step: 5 },
    likes: { type: "number", min: 0, max: 999 },
    featured: { type: "boolean" },
    tags: { type: "array", min: 0, max: 5, items: { type: "string" } },
    size: { type: "enum", selection: "single", options: ["sm", "md", "lg"] },
  }
}

📖 More

• npm: storybook-addon-range-controls
• Full docs & API examples: GitHub README

🙏 Looking for feedback

I’d love to hear your thoughts on:

• API design (is it clear enough?)
• Use cases where this might be helpful
• Any bugs or rough edges you run into

If it looks useful, please give it a try and let me know what you think!