button

src/app/(features)/srt-player/components/atoms/SeekBar.tsx

@@ -2,25 +2,16 @@
 
 import React from "react";
 import { SeekBarProps } from "../../types/player";
+import { RangeInput } from "@/components/ui/RangeInput";
 
 export function SeekBar({ value, max, onChange, disabled, className }: SeekBarProps) {
-  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = parseInt(event.target.value);
-    onChange(newValue);
-  }, [onChange]);
-
   return (
-    <input
-      type="range"
-      min={0}
-      max={max}
+    <RangeInput
       value={value}
-      onChange={handleChange}
+      max={max}
+      onChange={onChange}
       disabled={disabled}
-      className={`w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`}
-      style={{
-        background: `linear-gradient(to right, #374151 0%, #374151 ${(value / max) * 100}%, #e5e7eb ${(value / max) * 100}%, #e5e7eb 100%)`
-      }}
+      className={className}
     />
   );
 }