59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
/* eslint-disable react/prop-types */
|
|
import React from "react";
|
|
export default function CenterGrowSlider({
|
|
value,
|
|
min = -50,
|
|
max = 50,
|
|
backgroundColor = "rgba(150,150,150,0.3)",
|
|
height = 8,
|
|
}) {
|
|
// Clamp the value
|
|
const clamped = Math.max(min, Math.min(max, value));
|
|
const range = max - min;
|
|
const halfRange = range / 2;
|
|
const magnitude = Math.abs(clamped) / halfRange; // 0..1
|
|
|
|
// Calculate widths (each bar maxes out at 50% width)
|
|
const positiveWidth = clamped > 0 ? magnitude * 50 : 0;
|
|
const negativeWidth = clamped < 0 ? magnitude * 50 : 0;
|
|
|
|
const baseStyle = {
|
|
position: "absolute",
|
|
top: "50%",
|
|
height: `${height}px`,
|
|
transform: "translateY(-50%)",
|
|
};
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
width: "100%",
|
|
height: `${height}px`,
|
|
backgroundColor,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{/* Negative (left) bar */}
|
|
<div
|
|
className="bg-primary shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]"
|
|
style={{
|
|
...baseStyle,
|
|
right: "50%", // anchored to the center
|
|
width: `${negativeWidth}%`,
|
|
}}
|
|
/>
|
|
|
|
{/* Positive (right) bar */}
|
|
<div
|
|
className="bg-primary shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]"
|
|
style={{
|
|
...baseStyle,
|
|
left: "50%", // anchored to the center
|
|
width: `${positiveWidth}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|