Glass SliderRange sliders with glass tracks, glowing colored fills, and spring-animated thumbs that scale on drag.
.png?updatedAt=1775226802133)
Display
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/glass-sliderFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Glass Slider
Glass Slider is a range input with a frosted-glass track, a glowing colored fill that follows the value, and a thumb that scales up with Motion spring physics while you drag. The glass surface uses backdrop-filter so the track stays consistent with the page behind it. It is the right primitive for any setting that takes a continuous value: brightness, volume, opacity, model temperature, gradient stops, or any creative-tool parameter.
Built with
Frequently asked questions
- Is Glass Slider free to use?
- Yes. Glass Slider is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Glass Slider?
- One command: npx shadcn@latest add https://aicanvas.me/r/glass-slider.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Slider for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Glass Slider built with?
- Glass Slider is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Glass Slider?
- Common uses include Settings, Editor, and Dashboard. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Glass Slider with AI?
- Yes. Glass Slider ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas