AI Model Effort Selector with Magnetic Step Slider – ChatGPT Model Selector

ChatGPT Model Selector is a Vanilla JavaScript Web Component that creates a ChatGPT-inspired model picker and reasoning effort slider on your webpage.

When you click on the Advanced button, the component opens a popover with five discrete tiers (Light, Medium, High, Extra High, Ultra) and an advanced slider control with magnetic dragging and a confetti celebration.

See it in Action:

Features:

• Five selectable levels from Light to Ultra.
• Magnetic dragging with spring-style snapping between fixed stops.
• Compact menu and advanced slider views.
• Keyboard navigation and reduced-motion behavior.
• Animated color changes, sparkles, and an Ultra celebration effect.
• Public attributes, properties, and a standard selection event.
• Plus a SwiftUI package for Apple platforms.

How to Use it:

1. Download and load the main script chatgpt-model-selector.js.

<script src="js/chatgpt-model-selector.js"></script>

2. Add <chatgpt-model-selector> anywhere in the HTML document after the script has loaded. model-name controls the label shown in the selector. value sets the initial reasoning level.

• 0 = Light
• 1 = Medium
• 2 = High
• 3 = Extra High
• 4 = Ultra

<chatgpt-model-selector
  model-name="GPT-5.6"
  value="1"
></chatgpt-model-selector>

3. Listen for change when the user selects a different level.

const selector = document.querySelector('#reasoning-selector');
selector.addEventListener('change', (event) => {
  const { index, tier, model } = event.detail;
  console.log(index);
  console.log(tier);
  console.log(model);
});

4. The selected level can also change after the component has been rendered.

const selector = document.querySelector('#reasoning-selector');
// Move to Extra High.
selector.value = 3;
// Read the current numeric level.
console.log(selector.value);
// Read the current tier name.
console.log(selector.tier);

5. For SwiftUI projects, add the package through Xcode’s File > Add Package Dependencies using the repository URL, or declare it directly in Package.swift.

Alternatives:

• Claude-Style Effort Slider Web Component – Claude Model Selector
• Accessible Range Slider Custom Element
• Touch-enabled Custom Range Slider Web Component
• Modern Range Sliders Based On Native Range Inputs