Elastic Slider

An interactive slider with elastic animations and smooth physics

Configuring your account...

Please wait while we prepare everything for you

Usage

import ElasticSlider from '@/components/bynanaui/elastic-slider';
import { FiVolume, FiVolume2 } from 'react-icons/fi';

export default function Demo() {
  return (
    <ElasticSlider
      leftIcon={<FiVolume size={24} />}
      rightIcon={<FiVolume2 size={24} />}
      startingValue={0}
      defaultValue={50}
      maxValue={100}
      isStepped={true}
      stepSize={5}
    />
  );
}

Props

PropTypeDefaultDescription
defaultValuenumber50Starting value of the slider
startingValuenumber0Minimum value
maxValuenumber100Maximum value
isSteppedbooleanfalseWhether to snap to steps
stepSizenumber1Size of each step
leftIconReact.ReactNodeVolume down iconIcon on the left
rightIconReact.ReactNodeVolume up iconIcon on the right
classNamestring''Additional CSS classes

Features

  • Elastic Animation: Smooth spring physics when dragging beyond bounds
  • Icon Reactions: Icons animate when you drag past them
  • Stepped Mode: Snap to specific intervals
  • Black & White Theme: Clean, minimal design
  • Responsive: Works on all devices