Examples

• Threshold — how far a drag must go before the slide snaps.
• Transition — controlling the snap animation speed (CSS only).
• Spring — settling with spring physics instead of a CSS transition.
• Scale on drag — the slide scales while you drag.
• Controlled with buttons — driving activeIndex from your own state with prev/next buttons.
• Callbacks — watching onSlideStart and onSlideComplete.
• Keyboard — navigating with the arrow keys.
• Real-world usage — a live site using the slider.

---

Threshold

The threshold prop is the pixel distance a drag must exceed before the slider snaps to the next or previous slide. The default is 100.

This example uses threshold={50} — drag a shorter distance and it still snaps:

<Slider threshold={50}>
  {images.map(({ url, title }) => (
    <img src={url} key={title} alt={title} />
  ))}
</Slider>

---

Transition

The transition prop sets the duration, in seconds, of the CSS snap animation. The default is 0.3. It only applies when spring is off — with spring physics the settle is animated by the spring instead and transition is ignored.

This example uses transition={0.8} — a slower, more noticeable snap:

<Slider transition={0.8}>
  {images.map(({ url, title }) => (
    <img src={url} key={title} alt={title} />
  ))}
</Slider>

---

Spring

Passing spring settles the slide with spring physics instead of a CSS transition. The spring is tuned with stiffness, damping, and mass; the transition prop is ignored while spring is enabled.

This example uses a bouncier spring (stiffness={150}, damping={12}):

<Slider spring stiffness={150} damping={12}>
  {images.map(({ url, title }) => (
    <img src={url} key={title} alt={title} />
  ))}
</Slider>

---

Scale on drag

The scaleOnDrag prop adds a scale animation while a slide is being dragged:

<Slider scaleOnDrag>
  {images.map(({ url, title }) => (
    <img src={url} key={title} alt={title} />
  ))}
</Slider>

---

Controlled with buttons

The library renders slides only — it doesn’t ship prev/next buttons. To add them, keep the current slide in your own state and pass it back as activeIndex, then update that state from your buttons:

import { useState } from 'react'
import Slider from 'react-touch-drag-slider'

function App() {
  const [index, setIndex] = useState(0)

  return (
    <>
      <button onClick={() => setIndex((i) => Math.max(0, i - 1))}>
        Previous
      </button>
      <button
        onClick={() => setIndex((i) => Math.min(images.length - 1, i + 1))}
      >
        Next
      </button>
      <Slider activeIndex={index} onSlideComplete={setIndex}>
        {images.map(({ url, title }) => (
          <img src={url} key={title} alt={title} />
        ))}
      </Slider>
    </>
  )
}

onSlideComplete={setIndex} keeps the state in sync when the user drags instead of clicking a button.

---

Callbacks

onSlideStart fires when a drag (or arrow-key move) begins; onSlideComplete fires when the slide settles into its finished position. Both receive the slide index.

Drag the slider below and watch the log:

<Slider
  onSlideStart={(index) => console.log('started', index)}
  onSlideComplete={(index) => console.log('finished', index)}
>
  {images.map(({ url, title }) => (
    <img src={url} key={title} alt={title} />
  ))}
</Slider>

---

Keyboard

The slider wrapper is focusable (tabIndex={0}) and exposes role="slider". Focus it and press ArrowLeft / ArrowRight to move between slides:

<Slider threshold={100}>
  {images.map(({ url, title }) => (
    <img src={url} key={title} alt={title} />
  ))}
</Slider>

Arrow keys only navigate while the slider is focused, and you can opt out with navigateOnArrowKeys={false} if the slider sits inside other keyboard-driven UI.

---

Real-world usage

Bushblade Knives gallery — a full screen modal gallery built with the slider.