|
| 1 | +// import { RangeSlider, RangeSliderProps, RangeSliderValue } from "@mantine/core"; |
| 2 | +// import { useEffect, useRef, useState } from "react"; |
| 3 | +// |
| 4 | +// interface DraggableRangeSliderProps extends RangeSliderProps { |
| 5 | +// draggableBarHeightPx?: number; |
| 6 | +// value: RangeSliderValue; |
| 7 | +// onChange: (value: RangeSliderValue) => void; |
| 8 | +// } |
| 9 | +// |
| 10 | +// export default function DraggableRangeSlider({ |
| 11 | +// draggableBarHeightPx, |
| 12 | +// value, |
| 13 | +// onChange, |
| 14 | +// ...props |
| 15 | +// }: DraggableRangeSliderProps) { |
| 16 | +// const [range, setRange] = [value, onChange]; |
| 17 | +// |
| 18 | +// const draggingRef = useRef(false); |
| 19 | +// const lastMouseX = useRef(0); |
| 20 | +// const sliderRef = useRef<HTMLDivElement>(null); |
| 21 | +// const width = range[1] - range[0]; |
| 22 | +// |
| 23 | +// const handleMouseDown = (event: MouseEvent) => { |
| 24 | +// draggingRef.current = true; |
| 25 | +// lastMouseX.current = event.clientX; |
| 26 | +// }; |
| 27 | +// |
| 28 | +// const handleMouseUp = () => { |
| 29 | +// draggingRef.current = false; |
| 30 | +// }; |
| 31 | +// |
| 32 | +// const handleMouseMove = (event: MouseEvent) => { |
| 33 | +// if (!draggingRef.current || !sliderRef.current) return; |
| 34 | +// |
| 35 | +// const deltaX = event.clientX - lastMouseX.current; |
| 36 | +// lastMouseX.current = event.clientX; |
| 37 | +// |
| 38 | +// // Convert pixels to range values proportionally |
| 39 | +// const sliderWidth = sliderRef.current.clientWidth; |
| 40 | +// const rangeWidth = 100; // Assuming the slider goes from 0 to 100 |
| 41 | +// const scaleFactor = rangeWidth / sliderWidth; // Converts pixels to value change |
| 42 | +// |
| 43 | +// const deltaValue = deltaX * scaleFactor; // Smooth movement |
| 44 | +// |
| 45 | +// setRange(([start, end]) => { |
| 46 | +// let newStart = start + deltaValue; |
| 47 | +// let newEnd = end + deltaValue; |
| 48 | +// |
| 49 | +// // Prevent exceeding min/max limits |
| 50 | +// if (newStart < 0) { |
| 51 | +// newStart = 0; |
| 52 | +// newEnd = end - start; // Maintain width |
| 53 | +// } |
| 54 | +// if (newEnd > 100) { |
| 55 | +// newEnd = 100; |
| 56 | +// newStart = newEnd - (end - start); // Maintain width |
| 57 | +// } |
| 58 | +// |
| 59 | +// return [newStart, newEnd]; |
| 60 | +// }); |
| 61 | +// }; |
| 62 | +// |
| 63 | +// useEffect(() => { |
| 64 | +// document.addEventListener("mousemove", handleMouseMove); |
| 65 | +// document.addEventListener("mouseup", handleMouseUp); |
| 66 | +// return () => { |
| 67 | +// document.removeEventListener("mousemove", handleMouseMove); |
| 68 | +// document.removeEventListener("mouseup", handleMouseUp); |
| 69 | +// }; |
| 70 | +// }, []); |
| 71 | +// |
| 72 | +// return ( |
| 73 | +// <div ref={sliderRef} className="relative w-full"> |
| 74 | +// <RangeSlider |
| 75 | +// value={range} |
| 76 | +// onChange={setRange} |
| 77 | +// styles={{ |
| 78 | +// track: { cursor: "pointer" }, |
| 79 | +// bar: { cursor: "pointer" }, |
| 80 | +// }} |
| 81 | +// {...props} |
| 82 | +// /> |
| 83 | +// {/* Invisible overlay to detect middle drag */} |
| 84 | +// <div |
| 85 | +// className="absolute top-0 left-0 h-full bg-red-300" |
| 86 | +// style={{ |
| 87 | +// cursor: "grab", |
| 88 | +// width: `${width - width * 0.1}%`, |
| 89 | +// left: `${range[0] + width * 0.05}%`, |
| 90 | +// height: "20px", // Make it easy to grab |
| 91 | +// backgroundColor: "transparent", |
| 92 | +// zIndex: 10, |
| 93 | +// top: -(20 - (sliderRef.current ? sliderRef.current.offsetHeight : 0)) / 2, |
| 94 | +// }} |
| 95 | +// onMouseDown={handleMouseDown} |
| 96 | +// /> |
| 97 | +// </div> |
| 98 | +// ); |
| 99 | +// } |
0 commit comments