Leverage Slider

1"use client";
2 
3import React from "react";
4import { Label } from "@/components/ui/label";
5import { Slider } from "@/components/ui/slider";
6import { cn } from "@/lib/utils";
7 
8interface LeverageSliderProps {
9  min?: number;
10  max?: number;
11  step?: number;
12  value?: number[];
13  defaultValue?: number[];
14  onValueChange?: (value: number[]) => void;
15  className?: string;
16}
17 
18const LeverageSlider = ({
19  min,
20  max,
21  step,
22  value,
23  defaultValue,
24  onValueChange,
25  className,
26}: LeverageSliderProps) => {
27  const [displayValue, setDisplayValue] = React.useState(
28    defaultValue?.[0] ?? min ?? 0,
29  );
30 
31  const currentValue = value?.[0] ?? displayValue;
32 
33  const handleValueChange = (newValue: number[]) => {
34    setDisplayValue(newValue[0]);
35    onValueChange?.(newValue);
36  };
37 
38  const handleMinClick = () => {
39    if (min !== undefined) {
40      handleValueChange([min]);
41    }
42  };
43 
44  const handleMaxClick = () => {
45    if (max !== undefined) {
46      handleValueChange([max]);
47    }
48  };
49 
50  return (
51    <div className={cn("w-full space-y-2", className)}>
52      <div className="flex items-center justify-between text-sm">
53        <Label className="text-muted-foreground">Leverage</Label>
54        <span className="font-medium">{currentValue}x</span>
55      </div>
56      <Slider
57        min={min}
58        max={max}
59        step={step}
60        value={value ?? [displayValue]}
61        onValueChange={handleValueChange}
62      />
63      {(min !== undefined || max !== undefined) && (
64        <div className="flex mt-2 text-xs text-muted-foreground">
65          {min !== undefined && (
66            <button
67              type="button"
68              onClick={handleMinClick}
69              className="hover:text-foreground transition-colors cursor-pointer"
70            >
71              {min}x
72            </button>
73          )}
74          {max !== undefined && (
75            <button
76              type="button"
77              onClick={handleMaxClick}
78              className="ml-auto hover:text-foreground transition-colors cursor-pointer"
79            >
80              {max}x
81            </button>
82          )}
83        </div>
84      )}
85    </div>
86  );
87};
88 
89export type { LeverageSliderProps };
90export { LeverageSlider };