diff --git a/src/components/common/LeverageSlider/InputOverlay.tsx b/src/components/common/LeverageSlider/InputOverlay.tsx index 9ecb254f..757c585e 100644 --- a/src/components/common/LeverageSlider/InputOverlay.tsx +++ b/src/components/common/LeverageSlider/InputOverlay.tsx @@ -9,17 +9,19 @@ interface Props { marginThreshold?: number max: number type: LeverageSliderType + min: number } const THUMB_WIDTH = 33 -function InputOverlay({ max, value, marginThreshold, type }: Props) { - const thumbPosPercent = max === 0 ? 0 : 100 / (max / value) +function InputOverlay({ max, value, marginThreshold, type, min }: Props) { + const thumbPosPercent = max === 0 ? 0 : 100 / ((max - min) / (value - min)) const thumbPadRight = (thumbPosPercent / 100) * THUMB_WIDTH const markPosPercent = 100 / (max / (marginThreshold ?? 1)) const markPadRight = (markPosPercent / 100) * THUMB_WIDTH const hasPastMarginThreshold = marginThreshold ? value >= marginThreshold : undefined + console.log(max, value) return ( <>
{formatValue(value, { - maxDecimals: 2, + minDecimals: type !== 'margin' ? 1 : 2, + maxDecimals: type !== 'margin' ? 1 : 2, abbreviated: true, rounded: true, suffix: type !== 'margin' ? 'x' : '', diff --git a/src/components/common/LeverageSlider/index.tsx b/src/components/common/LeverageSlider/index.tsx index e3d8af8b..e8b83a04 100644 --- a/src/components/common/LeverageSlider/index.tsx +++ b/src/components/common/LeverageSlider/index.tsx @@ -6,6 +6,7 @@ import InputOverlay from 'components/common/LeverageSlider/InputOverlay' const LEFT_MARGIN = 5 type Props = { + min?: number max: number value: number disabled?: boolean @@ -19,6 +20,7 @@ type Props = { export type LeverageSliderType = 'margin' | 'long' | 'short' function LeverageSlider(props: Props) { const { value, max, onChange, wrapperClassName, disabled, marginThreshold, onBlur, type } = props + const min = props.min ?? 0 const handleOnChange = useCallback( (event: ChangeEvent) => { @@ -28,7 +30,6 @@ function LeverageSlider(props: Props) { ) const markPosPercent = 100 / (max / (marginThreshold ?? 1)) - return (
- +
- {markPosPercent > LEFT_MARGIN ? 0 : ''} - {max.toFixed(2)} + {markPosPercent > LEFT_MARGIN ? min : ''} + {max.toFixed(type !== 'margin' ? 0 : 2)}
) diff --git a/src/components/perps/Module/PerpsModule.tsx b/src/components/perps/Module/PerpsModule.tsx index 31042a25..056ec025 100644 --- a/src/components/perps/Module/PerpsModule.tsx +++ b/src/components/perps/Module/PerpsModule.tsx @@ -46,7 +46,13 @@ export function PerpsModule() { /> Position Leverage - +