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
-
+