New Storybook Addon: Range Controls – stress-test your UI with sliders

Hi everyone 👋

I built a new addon for Storybook called Range Controls.

It lets you adjust story args (strings, numbers, and arrays) with sliders — making it easier to stress-test layouts and catch edge cases.

🚀 Motivation

I often used Storybook’s built-in argTypes with type: "range" sliders to check design variations.

That works great for primitives (strings, numbers), but for more complex structures — like arrays of nested objects (e.g. tags inside a card) — I found myself writing the same boilerplate code again and again.

This addon was created to reduce that overhead and make it simpler to configure sliders for strings, numbers, and arrays.

🎨 Demo

Card List	Range Controls Panel

👉 Live Demo: Chromatic preview

📦 Installation

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

.storybook/main.js

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

⚡ Usage Example

parameters: {
  range: {
    title: { type: "string", min: 0, max: 50, step: 5 },
    likes: { type: "number", min: 0, max: 999 },
    tags: {
      type: "array",
      min: 0,
      max: 5,
      items: { type: "string" },
      defaultItem: (i: number) => `tag-${i + 1}`,
    },
  }
}

🙏 Feedback

I’d love to hear your thoughts:

• Is the API design clear enough?
• Would this be useful in your Storybook workflow?
• Any missing features you’d expect?

👉 Links:

• npm
• GitHub

Thanks for checking it out! 🚀