Added step prop

+ Added margin value in SB story
+ Refactoring

Author: Genarito

src/components/MultiRangeSlider.tsx

@@ -1,3 +1,7 @@
+// Utils
+import { decimalCount } from '../utils/utils'
+
+// Types
 import { SliderProps } from '../types'
 
 // Styles
@@ -25,6 +29,7 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
   const {
     defaultMinValue,
     defaultMaxValue,
+    step = 1,
     minValue,
     maxValue,
     onChange,
@@ -39,9 +44,7 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
    * @param value - New value set on the slider.
    * @returns Percent of the slider that need to be colored, from 0 to 100.
    */
-  const getPercent = (value: number) => {
-    return Math.round(((value - defaultMinValue) / (defaultMaxValue - defaultMinValue)) * 100)
-  }
+  const getPercent = (value: number) => Math.round(((value - defaultMinValue) / (defaultMaxValue - defaultMinValue)) * 100)
 
   /**
    * Invokes callback function if slider value is updated.
@@ -62,11 +65,11 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
    * @returns Div element with labels.
    */
   const renderLabels = () => {
-    if (showLabels) {
+    if (showLabels && minValue !== undefined && maxValue !== undefined) {
       return (
         <>
-          <div className="slider__left-value">{minValue}</div>
-          <div className="slider__right-value">{maxValue}</div>
+          <div className="slider__left-value">{minValue.toFixed(decimalCount(step))}</div>
+          <div className="slider__right-value">{maxValue.toFixed(decimalCount(step))}</div>
         </>
       )
     }
@@ -84,17 +87,18 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
         max={defaultMaxValue}
         value={minValue}
         onChange={(event) => {
-          handleChange(parseInt(event.target.value), maxValue)
+          handleChange(parseFloat(event.target.value), maxValue)
         }}
         className="thumb thumb--left"
       />
       <input
         type="range"
+        step={step}
         min={defaultMinValue}
         max={defaultMaxValue}
         value={maxValue}
         onChange={(event) => {
-          handleChange(minValue, parseInt(event.target.value))
+          handleChange(minValue, parseFloat(event.target.value))
         }}
         className="thumb thumb--right"
       />

src/components/SingleRangeSlider.tsx

@@ -1,3 +1,7 @@
+// Utils
+import { decimalCount } from '../utils/utils'
+
+// Types
 import { SliderProps } from '../types'
 
 // Styles
@@ -18,7 +22,7 @@ interface SingleRangeSliderProps extends SliderProps {
  * @returns Component.
  */
 const SingleRangeSlider = function (props: SingleRangeSliderProps) {
-  const { defaultMinValue, defaultMaxValue, value, color = 'Green', showLabels = false, onChange } = props
+  const { defaultMinValue, defaultMaxValue, value, color = 'Green', showLabels = false, step = 1, onChange } = props
 
   /**
    * Invokes callback function if slider value is updated.
@@ -37,18 +41,16 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
    * @param newValue - New value set on the slider.
    * @returns Percent of the slider that need to be colored, from 0 to 100.
    */
-  const getSelectedSliderPercent = (newValue: number) => {
-    return (newValue / defaultMaxValue) * 100
-  }
+  const getSelectedSliderPercent = (newValue: number) => newValue / defaultMaxValue * 100
 
   /**
    * If `showLabels` is `true`, returns a `<div>` that contains a label with the current value of the slider.
    *
    * @returns Div with label.
    */
   const renderLabels = () => {
-    if (showLabels) {
-      return <div className="slider__left-value">{value}</div>
+    if (showLabels && value !== undefined) {
+      return <div className="slider__left-value">{value.toFixed(decimalCount(step))}</div>
     }
   }
 
@@ -61,8 +63,9 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
         min={defaultMinValue}
         max={defaultMaxValue}
         value={value}
+        step={step}
         onChange={(event) => {
-          handleValueChange(parseInt(event.target.value))
+          handleValueChange(parseFloat(event.target.value))
         }}
         className="thumb thumb--left"
       />

src/stories/MultiRangeSlider.stories.tsx

@@ -40,9 +40,11 @@ const Template: ComponentStory<typeof MultiRangeSlider> = (args: MultiRangeSlide
 export const Basic = Template.bind({})
 Basic.args = {
   showLabels: true,
+  step: 1,
   minValue: 30,
   maxValue: 70,
   defaultMinValue: 0,
   defaultMaxValue: 100,
+  margin: 0,
   color: 'Orange'
 }

src/stories/SingleSlider.stories.tsx

@@ -34,6 +34,7 @@ export const Basic = Template.bind({})
 Basic.args = {
   showLabels: true,
   value: 40,
+  step: 1,
   defaultMinValue: 0,
   defaultMaxValue: 100,
   color: 'Salmon'

src/types.ts

@@ -150,6 +150,8 @@ interface SliderProps {
     color?: RangeColor;
     /** Indicates if minimum/maximum values labels should be shown. Default to `false`. */
     showLabels?: boolean;
+    /** Step to change slider value. Default to 1. */
+    step?: number;
 }
 
 export type { RangeColor, SliderProps }

src/utils/utils.ts

@@ -0,0 +1,20 @@
+/**
+ * Gets the count of numbers after the decimal point from a number.
+ *
+ * @param num - Number to get its decimal count.
+ * @returns Number of decimals.
+ */
+const decimalCount = (num: number): number => {
+  // Convert to String
+  const numStr = num.toString()
+
+  // String Contains Decimal
+  if (numStr.includes('.')) {
+    return numStr.split('.')[1].length
+  }
+
+  // String Does Not Contain Decimal
+  return 0
+}
+
+export { decimalCount }