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
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number | 50 | Starting value of the slider |
startingValue | number | 0 | Minimum value |
maxValue | number | 100 | Maximum value |
isStepped | boolean | false | Whether to snap to steps |
stepSize | number | 1 | Size of each step |
leftIcon | React.ReactNode | Volume down icon | Icon on the left |
rightIcon | React.ReactNode | Volume up icon | Icon on the right |
className | string | '' | 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