Animated Range Slider Components

Dev Design Library indexes 17 Animated range slider components from 11 open-source UI libraries, with the most coming from beUI, Fluid Functionalism, Nexvyn UI, uselayouts and Sona UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the range slider components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Range slider components belong to the Inputs group.

• Morph SliderReact Bits · ReactWebGL slider that melts between images with a displacement transition.
• Range SliderbeUI · ReactA bar thumb that glides between steps.
• SliderFluid Functionalism · ReactAnimated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI…
• Slideruselayouts · ReactA dual-sided ratio slider animated with spring physics and drag interactions.
• Ratio SliderNexvyn UI · ReactA split ratio slider with two color bars, a draggable divider, and responsive labels that collapse when space is tight.
• Fluid SliderSona UI · ReactA labeled Base UI range control with direct surface selection, a dedicated draggable indicator, and restrained…
• Carousel SliderWatermelon UI · React
• SliderArc Library · ReactPick a value or a range on a track that follows your finger.
• Range SliderUI Lab · ReactTwo thumbs that glide, stop at each other, and show their value as you drag.
• SliderHextaUI · ReactPick a value or a range by dragging, tapping the track or using the keys, with jumps that glide and an optional value…
• SliderReactFrame · ReactAn accessible single or range slider with a draggable thumb, a value tooltip, optional step marks, keyboard control…
• Range Slider FluidbeUI · ReactRange slider with two thumbs and a fluid, springy fill between them.
• Slider (Base UI)Fluid Functionalism · ReactAnimated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Base UI flavor.
• Range Slider BubblebeUI · React
• Range Slider InlinebeUI · React
• Range Slider RulerbeUI · React
• Range Slider WavebeUI · React

Libraries with Animated range slider components

• beUI
• Fluid Functionalism
• Nexvyn UI
• uselayouts
• Sona UI

Related categories

• Range Slider Components
• React Range Slider Components
• Tailwind CSS Range Slider Components
• Animated Input Components
• Animated Text Input Components
• Animated Select Components
• Animated Slider Components
• Animated Switch Components
• Animated Form Components
• Animated Textarea Components
• Animated Search Input Components
• Animated Checkbox Components
• Animated Segmented Control Components
• Animated Form Field Components
• Animated Rating Components
• Animated File Upload Components
• Animated Wheel Picker Components
• Animated Knob Components
• Animated Color Picker Components