ComparisionSlider

comparisionslider-1779394643441.tsx

'use client'
import { useState, useRef } from 'react'

export default function ComparisonSlider() {
  const [pos, setPos] = useState(50)
  const ref = useRef(null)
  const dragging = useRef(false)
  const onMouseDown = () => { dragging.current = true }
  const onMouseMove = (e) => {
    if (!dragging.current || !ref.current) return
    const rect = ref.current.getBoundingClientRect()
    setPos(Math.min(Math.max(((e.clientX-rect.left)/rect.width)*100,5),95))
  }
  const onMouseUp = () => { dragging.current = false }
  return (
    <div ref={ref} onMouseMove={onMouseMove} onMouseUp={onMouseUp} onMouseLeave={onMouseUp}
      style={{ position:'relative', width:'400px', height:'240px', borderRadius:'16px', overflow:'hidden', cursor:'col-resize', userSelect:'none' }}>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(135deg,#f0f4ff,#dbeafe)', display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', gap:'8px' }}>
        <div style={{ fontSize:'48px' }}>🌑</div>
        <div style={{ fontWeight:700, color:'#1d4ed8', fontSize:'14px' }}>Before</div>
      </div>
      <div style={{ position:'absolute', inset:0, clipPath:'inset(0 '+(100-pos)+'% 0 0)', background:'linear-gradient(135deg,#1e1e2e,#4c1d95)', display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', gap:'8px' }}>
        <div style={{ fontSize:'48px' }}>⚡</div>
        <div style={{ fontWeight:700, color:'#a78bfa', fontSize:'14px' }}>After</div>
      </div>
      <div onMouseDown={onMouseDown} style={{
        position:'absolute', top:0, bottom:0, left:pos+'%', transform:'translateX(-50%)',
        width:'3px', background:'#fff', cursor:'col-resize', zIndex:10,
        boxShadow:'0 0 10px rgba(0,0,0,0.3)',
      }}>
        <div style={{
          position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)',
          width:'36px', height:'36px', borderRadius:'50%', background:'#fff',
          boxShadow:'0 4px 16px rgba(0,0,0,0.3)',
          display:'flex', alignItems:'center', justifyContent:'center', fontSize:'16px',
        }}>⇔</div>
      </div>
    </div>
  )
}

Component info

CategoryMedia

Frameworkreact

TierFREE

Copies0

About

Before/after image comparison slider with drag handle

More from Media

'use client'
import { useState, useEffect } from 'react'

const IMAGES = [
  { id: 1, src: null, color: 'linear-gradient(135deg, #C9A84C, #6366f1)', caption: 'GlowButton Component', w: 1, h: 2 },
  { id: 2, src: null, color: 'linear-gradient(135deg,

ImageGallery

Media

'use client';
import { useEffect, useRef, useState } from 'react';

export default function AudioVisualizer({ isPlaying = true }) {
  const bars = 32;
  const refs = useRef([]);
  const [playing, setPlaying] = useState(isPlaying);

  useEffect(() =>

AudioVisualizer

Media

'use client'
import { useState, useEffect } from 'react'

export default function AudioPlayer({
  title = 'Midnight Drive',
  artist = 'Synthwave Radio',
  emoji = '🎵',
  duration = 217,
}) {
  const [playing, setPlaying] = useState(false)
  const [

AudioPlayer

Media

'use client'
import { useState } from 'react'

const IMAGES = [
  { id:1, emoji:'🌄', label:'Mountains', bg:'linear-gradient(135deg,#667eea,#764ba2)', h:180 },
  { id:2, emoji:'🌊', label:'Ocean', bg:'linear-gradient(135deg,#0891b2,#0e7490)', h:120 }

ImageGallery

Media