InteractiveLiquid Glass
Slider
Frosted range slider with spring-animated thumb. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add sliderRange controls
About this component
Slider is part of Interactive. Frosted range slider with spring-animated thumb.
Install with npx @intellihelper/cli@latest add slider. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Slider
Use when
- Use Slider when frosted range slider with spring-animated thumb.
- Accordions, sliders, toggles, carousels, and steppers for progressive disclosure.
- Settings that benefit from compact, interactive chrome.
Avoid when
- Critical content that must be fully visible without interaction.
- Carousels for SEO-critical copy (prefer static lists).
Accessibility notes
- Ensure slider values are announced; provide keyboard alternatives.
- Accordion triggers need expanded/collapsed state for assistive tech.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- One primary interaction pattern per region to avoid competing controls.
- Pair steppers with clear next/back actions.