change labels for leverage slider (#738)

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) {
+function InputOverlay({ max, value, marginThreshold, type, min }: Props) {
-  const thumbPosPercent = max === 0 ? 0 : 100 / (max / value)
+  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 (
     <>
       <div
@@ -63,7 +65,8 @@ function InputOverlay({ max, value, marginThreshold, type }: Props) {
         style={{ left: `calc(${thumbPosPercent}% - ${thumbPadRight}px)` }}
       >
         {formatValue(value, {
-          maxDecimals: 2,
+          minDecimals: type !== 'margin' ? 1 : 2,
+          maxDecimals: type !== 'margin' ? 1 : 2,
           abbreviated: true,
           rounded: true,
           suffix: type !== 'margin' ? 'x' : '',

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<HTMLInputElement>) => {
@@ -28,7 +30,6 @@ function LeverageSlider(props: Props) {
   )
 
   const markPosPercent = 100 / (max / (marginThreshold ?? 1))
-
   return (
     <div
       className={classNames(
@@ -49,16 +50,22 @@ function LeverageSlider(props: Props) {
           type='range'
           value={value.toFixed(2)}
           step={max / 101}
-          min={0}
+          min={min}
           max={max}
           onChange={handleOnChange}
           onBlur={onBlur}
         />
-        <InputOverlay max={max} marginThreshold={marginThreshold} value={value} type={type} />
+        <InputOverlay
+          max={max}
+          marginThreshold={marginThreshold}
+          value={value}
+          type={type}
+          min={min}
+        />
       </div>
       <div className={'flex w-full justify-between text-xs text-opacity-50 text-white font-bold'}>
-        <span>{markPosPercent > LEFT_MARGIN ? 0 : ''}</span>
+        <span>{markPosPercent > LEFT_MARGIN ? min : ''}</span>
-        <span>{max.toFixed(2)}</span>
+        <span>{max.toFixed(type !== 'margin' ? 0 : 2)}</span>
       </div>
     </div>
   )

src/components/perps/Module/PerpsModule.tsx

@@ -46,7 +46,13 @@ export function PerpsModule() {
       />
       <Or />
       <Text size='sm'>Position Leverage</Text>
-      <LeverageSlider max={10} value={leverage} onChange={setLeverage} type={tradeDirection} />
+      <LeverageSlider
+        min={1}
+        max={10}
+        value={leverage}
+        onChange={setLeverage}
+        type={tradeDirection}
+      />
       <LeverageButtons />
       <Spacer />
       <PerpsSummary