Replace variations slider with button picker

[saeeabhy]

Summary

Replaces the range slider used to select the number of image variations with a segmented button picker for a cleaner, more intuitive interaction.

Problem

The slider element was considered a poor UX choice for selecting the number of variations (1–8), as it lacks precision and visual clarity for a small, discrete set of options.

Solution

Replaced the <input type="range"> with a row of styled toggle buttons, one for each variation count (1–8), rendered inside a bordered inline-flex container.

Key Changes

• Removed the range slider and its associated label layout (value display on the right)
• Added a segmented button group rendering buttons for values 1 through 8
• Active selection is highlighted using bg-primary / text-primary-foreground styles
• Inactive buttons show muted text with a hover state for discoverability
• Buttons have rounded corners on the first and last items to form a cohesive pill-like group

---

  

---

To clone this PR locally use the Github CLI with command gh pr checkout 51

You can tag me at @BuilderIO for anything you want me to fix or change

[netlify]

✅ Deploy Preview for agent-native-fw ready!

Name	Link
🔨 Latest commit	a522e81
🔍 Latest deploy log	https://app.netlify.com/projects/agent-native-fw/deploys/69ba6e04f271340008d08947
😎 Deploy Preview	https://deploy-preview-51--agent-native-fw.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[saeeabhy]

Small change, just wanted to try something out