Claude-Style Effort Slider Web Component – Claude Model Selector

Claude Model Selector is a Web Component that adds a Claude-inspired effort level picker to your web page.

It presents six discrete levels through an animated slider control with magnetic dragging, spring snapping, and keyboard interaction.

The component is ideal for AI agents, developer tools, and configuration panels that need a compact control for choosing processing depth, quality, intensity, or another ordered preset.

Features:

• Six discrete effort levels from Low to Ultracode.
• Magnetic pointer movement with spring snapping.
• Animated pixel field for the highest effort level.
• Mouse, touch, and keyboard interaction.
• Escape key and outside-click panel closing.
• Visible keyboard focus states.
• Reduced-motion preference support.
• Responsive sizing through a CSS custom property.
• Standard custom element attributes and events.

How to use it:

1. Download the package and load the claude-model-selector.js script from the JavaScript directory into your project.

<script
  type="module"
  src="/path/to/claude-model-selector.js">
</script>

2. Add the <claude-model-selector> element after loading the module. The value attribute accepts a number from 0 to 5:

0 = Low
1 = Medium
2 = High
3 = Extra
4 = Max
5 = Ultracode

<claude-model-selector value="2"></claude-model-selector>

3. Open the effort picker by default:

<claude-model-selector value="2" open></claude-model-selector>

4. Disable the effort picker by toggling the disabled property from JavaScript.

<claude-model-selector value="2" open></claude-model-selector>

const effortSelector = document.querySelector("#effort-selector");
effortSelector.disabled = true;

5. Read the selected level:

const effortSelector = document.querySelector("claude-model-selector");
console.log(effortSelector.value);
console.log(effortSelector.level);

6. Update the value from JavaScript:

const effortSelector = document.querySelector("claude-model-selector");
// Select the Max level.
effortSelector.value = 4;

7. API methods:

const effortSelector = document.querySelector("claude-model-selector");
// Open the effort panel.
effortSelector.openPanel();
// Close the effort panel.
effortSelector.close();
// Switch between the open and closed states.
effortSelector.toggle();

8. The component emits input during continuous adjustment and change after the selection settles on a level. Both events place the current index, level name, and numeric value in event.detail.

const effortSelector = document.querySelector("claude-model-selector");
// Fires during drag or keyboard adjustment.
effortSelector.addEventListener("input", function (event) {
  console.log(event.detail.index);
  console.log(event.detail.level);
  console.log(event.detail.value);
});
// Fires after the selector settles on a level.
effortSelector.addEventListener("change", function (event) {
  console.log(event.detail.index);
  console.log(event.detail.level);
  console.log(event.detail.value);
});

9. The component uses Shadow DOM for its internal interface. You can override the default CSS custom properties to create your own styles:

• --effort-accent (color): Sets the main accent color.
• --effort-track (color): Sets the default slider track color.
• --effort-surface (color): Sets the panel background color.
• --effort-width (length): Sets the component width.

claude-model-selector {
  --effort-accent: #6750a4;
  --effort-track: #e9e7ef;
  --effort-surface: #ffffff;
  --effort-width: min(26rem, calc(100vw - 2rem));
}

Alternatives:

• AI Model Effort Selector with Magnetic Step Slider – ChatGPT Model Selector
• Responsive & Touch-enabled Range Slider In Vanilla JavaScript
• Accessible Range Slider Custom Element
• Touch-enabled Custom Range Slider Web Component
• Build Custom Circular Range Sliders with CircularRange Web Component