Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React Physics Dragger

A simple, no-frills horiztonal dragger/slider with physics

example gif

NPM npm bundle size

Example site

This is a React component which basically adds a wrapper element with horizontal dragging capabilities. It uses a little bit of physics to apply friction and boundary bouncing (similar to Apple's interfaces, and the Flickity carousel).

  • Works with both touch and mouse
  • 0 dependencies
  • Super small

Example usage

yarn add react-physics-dragger
# or
npm i react-physics-dragger

Internally it uses ResizeObserver so you might need to add a polyfill if you support IE11. If so, instructions below.

import Dragger from 'react-physics-dragger'
import ResizeObserver from 'resize-observer-polyfill' // this one works pretty great

const App = () => {
  return (
      ResizeObserverPolyfill={ResizeObserver} // remember; only if you need it, else it uses window.ResizeObserver


Property Type Default Value Description
friction number 0.95 Optional. Lower values feel grippier, higher values feel slippier.
draggerRef function Optional. Use to access the components internal methods (see below section "Ref Methods") and Example1.
onFrame callback function Optional. This function is fired on every movement, resize, and mount. It provides one param object includes the x position, progress (from 0 to 1), and dragger dimensions. See Example2.
onDown callback function Optional. Fired on mouse or touch press.
onUp callback function Optional. Fired on mouse or touch release.
onStaticClick function Optional. Fired when an item within the dragger is clicked (or tapped). Useful for avoiding events where dragging can be considered a click.
setCursorStyles boolean true Optional. If enabled, styles are added/removed to the <html> element for grabbing cursor styles.
className string Optional. Add your own class name to the outer element
style CSSProperties Optional. Add your own styles to the outer element
innerStyle CSSProperties Optional. Add your own styles to the inner element
disabled boolean false Optional. Enable/disable the component.
ResizeObserverPolyfill Optional. If you need the polyfill pass it in as a prop.

Ref Methods

Property Type Description
setPosition function Changes the position of the slider. draggerRef.current.setPosition(x, false) where x is the pixel value. Accepts a second argument (boolean, false by default) which determines whether to move to setPosition value instantly.


Inspired by Dave DeSandro's work on Practical UI Physics; and

This library was packaged with


MIT © nickmcmillan


A simple, no-frills horiztonal dragger/slider with physics






No packages published