What is claude-model-selector?

claude-model-selector is a small, self contained piece of web page interface, styled after a slider seen in the Claude desktop app for choosing how much effort an AI response should use. It is built as a Web Component, meaning it works as a single custom HTML tag you can drop into any page without pulling in any other library or framework. Once added to a page, the component shows six discrete levels to choose from: Low, Medium, High, Extra, Max, and Ultracode. Users can drag the slider between levels, and it snaps into place with a light spring like motion once released. The top tier, Ultracode, has an animated pixel effect to make it stand out. The component supports keyboard navigation, visible focus outlines, closing with the Escape key or by clicking outside it, and it respects a visitor's system setting for reduced motion. A developer can read or set the current position using a value attribute, check the current level's name, and open, close, or toggle the effort panel through simple method calls. The component fires standard input events while someone is dragging the slider, and a change event once a selection is finalized, both of which include the selected index, level name, and value so a page can react to the choice. Its colors and width can be adjusted through a small set of CSS variables. To try it, a developer can open the included demo page directly in a browser or copy the JavaScript file into their own project and include it with a single script tag. It needs a modern browser that supports Web Components, Shadow DOM, Canvas 2D, and ResizeObserver. The project states plainly that it is an independent, Claude inspired experiment and is not affiliated with or endorsed by Anthropic. It is released under the MIT license.