Fixed coloured percentage

Author: Genarito

src/components/SingleRangeSlider.tsx

@@ -52,12 +52,11 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
   }
 
   /**
-   * Returns the selected slice of the slider, in percent from 0 to 100.
+   * Returns the selected slice of the slider, in percent considering range from defaultMinValue to defaultMaxValue.
    *
-   * @param newValue - New value set on the slider.
-   * @returns Percent of the slider that need to be colored, from 0 to 100.
+   * @returns Percent of the slider that need to be colored.
    */
-  const getSelectedSliderPercent = (newValue: number) => newValue / defaultMaxValue * 100
+  const getSelectedSliderPercent = () => ((value - defaultMinValue) * 100) / (defaultMaxValue - defaultMinValue)
 
   /**
    * If `showLabels` is `true`, returns a `<div>` that contains a label with the current value of the slider.
@@ -70,7 +69,7 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
     }
   }
 
-  const selectedPercent = `${getSelectedSliderPercent(value)}%`
+  const selectedPercent = `${getSelectedSliderPercent()}%`
   const disabledClass = disabled ? 'disabled' : ''
 
   return (