Make price slider accurately represent the selected price independently from step (#1453)

Author: Aljullu

assets/js/base/components/price-slider/index.js

@@ -81,21 +81,16 @@ const PriceSlider = ( {
 			};
 		}
 
-		// Normalize to whatever is the closest step (because range input will
-		// only jump to the closest step in the range).
-		const min = Math.round( minPrice / step ) * step;
-		const max = Math.round( maxPrice / step ) * step;
-
 		const low =
 			Math.round(
 				100 *
-					( ( min - minConstraint ) /
+					( ( minPrice - minConstraint ) /
 						( maxConstraint - minConstraint ) )
 			) - 0.5;
 		const high =
 			Math.round(
 				100 *
-					( ( max - minConstraint ) /
+					( ( maxPrice - minConstraint ) /
 						( maxConstraint - minConstraint ) )
 			) + 0.5;
 
@@ -162,8 +157,8 @@ const PriceSlider = ( {
 			);
 			const targetValue = event.target.value;
 			const currentValues = isMin
-				? [ targetValue, maxPrice ]
-				: [ minPrice, targetValue ];
+				? [ Math.round( targetValue / step ) * step, maxPrice ]
+				: [ minPrice, Math.round( targetValue / step ) * step ];
 			const values = constrainRangeSliderValues(
 				currentValues,
 				minConstraint,
@@ -252,6 +247,11 @@ const PriceSlider = ( {
 		! hasValidConstraints && 'is-disabled'
 	);
 
+	const minRangeStep =
+		minRange && document.activeElement === minRange.current ? step : 1;
+	const maxRangeStep =
+		maxRange && document.activeElement === maxRange.current ? step : 1;
+
 	return (
 		<div className={ classes }>
 			<div
@@ -274,7 +274,7 @@ const PriceSlider = ( {
 							) }
 							value={ minPrice || 0 }
 							onChange={ rangeInputOnChange }
-							step={ step }
+							step={ minRangeStep }
 							min={ minConstraint }
 							max={ maxConstraint }
 							ref={ minRange }
@@ -289,7 +289,7 @@ const PriceSlider = ( {
 							) }
 							value={ maxPrice || 0 }
 							onChange={ rangeInputOnChange }
-							step={ step }
+							step={ maxRangeStep }
 							min={ minConstraint }
 							max={ maxConstraint }
 							ref={ maxRange }