@faststore/ui 1.10.18 → 1.10.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/atoms/Slider/Slider.d.ts +4 -0
  3. package/dist/atoms/Slider/Slider.js +20 -17
  4. package/dist/atoms/Slider/Slider.js.map +1 -1
  5. package/dist/molecules/PriceRange/PriceRange.js +2 -2
  6. package/dist/molecules/PriceRange/PriceRange.js.map +1 -1
  7. package/package.json +3 -4
  8. package/src/atoms/Slider/Slider.tsx +36 -21
  9. package/src/molecules/PriceRange/PriceRange.tsx +2 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.10.24](https://github.com/vtex/faststore/compare/v1.10.23...v1.10.24) (2022-07-25)
7
+
8
+ **Note:** Version bump only for package @faststore/ui
9
+
10
+
11
+
12
+
13
+
14
+ ## [1.10.22](https://github.com/vtex/faststore/compare/v1.10.21...v1.10.22) (2022-07-25)
15
+
16
+ **Note:** Version bump only for package @faststore/ui
17
+
18
+
19
+
20
+
21
+
22
+ ## [1.10.20](https://github.com/vtex/faststore/compare/v1.10.19...v1.10.20) (2022-07-22)
23
+
24
+ **Note:** Version bump only for package @faststore/ui
25
+
26
+
27
+
28
+
29
+
6
30
  ## 1.10.18 (2022-07-20)
7
31
 
8
32
 
package/dist/atoms/Slider/Slider.d.ts CHANGED
@@ -16,6 +16,10 @@ export declare type SliderProps = {
16
16
  * The maximum value of the slider.
17
17
  */
18
18
  max: Range;
19
+ /**
20
+ * Specifies the number interval to be used in the inputs.
21
+ */
22
+ step?: number;
19
23
  /**
20
24
  * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
21
25
  *
package/dist/atoms/Slider/Slider.js CHANGED
@@ -3,40 +3,43 @@
3
3
  */
4
4
  import React, { useState, useMemo, useImperativeHandle, forwardRef, } from 'react';
5
5
  const percent = (value, min, max) => Math.round(((value - min) / (max - min)) * 100);
6
- const Slider = forwardRef(function Slider({ min, max, onChange, onEnd, testId = 'store-slider', getAriaValueText, className, minValueLabelComponent, maxValueLabelComponent, }, ref) {
6
+ const Slider = forwardRef(function Slider({ min, max, onChange, onEnd, testId = 'store-slider', getAriaValueText, className, step, minValueLabelComponent, maxValueLabelComponent, }, ref) {
7
+ const widthPercent = useMemo(() => (max.absolute - min.absolute) / 100, [max.absolute, min.absolute]);
7
8
  const [minPercent, setMinPercent] = useState(() => percent(min.selected, min.absolute, max.absolute));
8
9
  const [maxPercent, setMaxPercent] = useState(() => percent(max.selected, min.absolute, max.absolute));
9
- const { minVal, maxVal } = useMemo(() => {
10
- const widthPercent = (max.absolute - min.absolute) / 100;
11
- return {
12
- minVal: min.absolute + minPercent * widthPercent,
13
- maxVal: min.absolute + maxPercent * widthPercent,
14
- };
15
- }, [min, max, maxPercent, minPercent]);
10
+ const [minVal, setMinVal] = useState(() => Math.round(min.absolute + minPercent * widthPercent));
11
+ const [maxVal, setMaxVal] = useState(() => Math.round(min.absolute + maxPercent * widthPercent));
16
12
  useImperativeHandle(ref, () => ({
17
13
  setSliderValues: (values) => {
18
14
  const sliderMinValue = Math.min(Number(values.min), maxVal);
19
- const sliderMaxValue = Math.max(Number(values.max), minVal);
15
+ setMinVal(sliderMinValue);
20
16
  setMinPercent(percent(sliderMinValue, min.absolute, max.absolute));
17
+ if (values.max > max.absolute) {
18
+ setMaxVal(max.absolute);
19
+ setMaxPercent(percent(max.absolute, min.absolute, max.absolute));
20
+ return;
21
+ }
22
+ const sliderMaxValue = Math.max(Number(values.max), minVal);
23
+ setMaxVal(sliderMaxValue);
21
24
  setMaxPercent(percent(sliderMaxValue, min.absolute, max.absolute));
22
25
  },
23
26
  }));
24
27
  return (React.createElement("div", { "data-store-slider": true, "data-testid": testId, className: className },
25
- React.createElement("div", { style: {
26
- left: `${minPercent < min.absolute ? min.absolute : minPercent}%`,
27
- width: `${maxPercent - minPercent > 100
28
- ? 100 - minPercent
29
- : maxPercent - minPercent}%`,
30
- }, "data-slider-range": true }),
28
+ React.createElement("div", { "data-slider-range": true, style: {
29
+ left: `${minPercent}%`,
30
+ width: `${maxPercent - minPercent}%`,
31
+ } }),
31
32
  minValueLabelComponent && minValueLabelComponent(minVal),
32
- React.createElement("input", { type: "range", min: min.absolute, max: max.absolute, value: minVal, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
33
+ React.createElement("input", { type: "range", min: Math.round(min.absolute), max: Math.round(max.absolute), value: minVal, step: step, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
33
34
  const minValue = Math.min(Number(event.target.value), maxVal);
35
+ setMinVal(minValue);
34
36
  setMinPercent(percent(minValue, min.absolute, max.absolute));
35
37
  onChange?.({ min: minValue, max: maxVal });
36
38
  }, "data-slider-thumb": "left", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": minVal, "aria-label": String(minVal), "aria-labelledby": getAriaValueText?.(minVal, 'min') }),
37
39
  maxValueLabelComponent && maxValueLabelComponent(maxVal),
38
- React.createElement("input", { type: "range", min: min.absolute, max: max.absolute, value: maxVal, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
40
+ React.createElement("input", { type: "range", min: Math.round(min.absolute), max: Math.round(max.absolute), value: maxVal, step: step, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
39
41
  const maxValue = Math.max(Number(event.target.value), minVal);
42
+ setMaxVal(maxValue);
40
43
  setMaxPercent(percent(maxValue, min.absolute, max.absolute));
41
44
  onChange?.({ min: minVal, max: maxValue });
42
45
  }, "data-slider-thumb": "right", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": maxVal, "aria-label": String(maxVal), "aria-labelledby": getAriaValueText?.(maxVal, 'max') })));
package/dist/atoms/Slider/Slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/atoms/Slider/Slider.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/atoms/Slider/Slider.tsx"],"names":[],"mappings":"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"}
package/dist/molecules/PriceRange/PriceRange.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useRef, useImperativeHandle, forwardRef } from 'react';
2
2
  import Price from '../../atoms/Price';
3
3
  import Slider from '../../atoms/Slider';
4
- const PriceRange = forwardRef(function PriceRange({ className, formatter, max, min, onChange, onEnd, testId = 'store-price-range', variant, 'aria-label': ariaLabel, }, ref) {
4
+ const PriceRange = forwardRef(function PriceRange({ className, formatter, max, min, step, onChange, onEnd, testId = 'store-price-range', variant, 'aria-label': ariaLabel, }, ref) {
5
5
  const sliderRef = useRef();
6
6
  useImperativeHandle(ref, () => ({
7
7
  setPriceRangeValues: (values) => {
@@ -10,7 +10,7 @@ const PriceRange = forwardRef(function PriceRange({ className, formatter, max, m
10
10
  },
11
11
  }));
12
12
  return (React.createElement("div", { "data-store-price-range": true, "data-testid": testId, className: className },
13
- React.createElement(Slider, { ref: sliderRef, min: min, max: max, onEnd: onEnd, "aria-label": ariaLabel, onChange: (value) => onChange?.(value), minValueLabelComponent: (minValue) => {
13
+ React.createElement(Slider, { ref: sliderRef, min: min, max: max, step: step, onEnd: onEnd, "aria-label": ariaLabel, onChange: (value) => onChange?.(value), minValueLabelComponent: (minValue) => {
14
14
  const minPercent = (minValue / max.absolute) * 100;
15
15
  return (React.createElement(Price, { value: minValue, variant: variant, formatter: formatter, "data-price-range-value-label": "min", style: {
16
16
  position: 'absolute',
package/dist/molecules/PriceRange/PriceRange.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../src/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGtE,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AA2BvC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,MAAM,EAEpB,CAAA;IAEJ,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,mBAAmB,EAAE,CAAC,MAAoC,EAAE,EAAE;YAC5D,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;YAClB,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,4EAAyC,MAAM,EAAE,SAAS,EAAE,SAAS;QACnE,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,gBACA,SAAS,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EACtC,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,kCACS,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,EACD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,kCACc,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,GACD,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../src/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGtE,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AA2BvC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,MAAM,EAEpB,CAAA;IAEJ,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,mBAAmB,EAAE,CAAC,MAAoC,EAAE,EAAE;YAC5D,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;YAClB,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,4EAAyC,MAAM,EAAE,SAAS,EAAE,SAAS;QACnE,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,SAAS,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EACtC,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,kCACS,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,EACD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,kCACc,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,GACD,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/ui",
3
- "version": "1.10.18",
3
+ "version": "1.10.24",
4
4
  "description": "A lightweight, framework agnostic component library for React",
5
5
  "author": "emersonlaurentino",
6
6
  "license": "MIT",
@@ -57,6 +57,7 @@
57
57
  "react-dom": "^17.0.2"
58
58
  },
59
59
  "devDependencies": {
60
+ "@faststore/styles": "^1.10.18",
60
61
  "@size-limit/preset-small-lib": "^7.0.8",
61
62
  "@storybook/addon-actions": "^6.4.4",
62
63
  "@storybook/addon-docs": "^6.4.4",
@@ -72,8 +73,6 @@
72
73
  "@types/jest-axe": "^3.5.3",
73
74
  "@types/tabbable": "^3.1.1",
74
75
  "@types/testing-library__jest-dom": "^5.9.5",
75
- "@vtex/theme-b2c-tailwind": "^1.8.42",
76
- "@vtex/tsconfig": "^0.5.0",
77
76
  "chalk": "^5.0.0",
78
77
  "jest-axe": "^5.0.1",
79
78
  "jest-matcher-utils": "^27.4.2",
@@ -86,5 +85,5 @@
86
85
  "tsdx": "^0.14.1",
87
86
  "typescript": "^4.2.4"
88
87
  },
89
- "gitHead": "a6f5e44b68bde5b811a345bffb7bec697e8f3933"
88
+ "gitHead": "c1f34304dfa62ae66ef55af330a0b9c2c329dc14"
90
89
  }
package/src/atoms/Slider/Slider.tsx CHANGED
@@ -23,6 +23,10 @@ export type SliderProps = {
23
23
  * The maximum value of the slider.
24
24
  */
25
25
  max: Range
26
+ /**
27
+ * Specifies the number interval to be used in the inputs.
28
+ */
29
+ step?: number
26
30
  /**
27
31
  * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
28
32
  *
@@ -72,11 +76,16 @@ const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
72
76
  testId = 'store-slider',
73
77
  getAriaValueText,
74
78
  className,
79
+ step,
75
80
  minValueLabelComponent,
76
81
  maxValueLabelComponent,
77
82
  },
78
83
  ref
79
84
  ) {
85
+ const widthPercent = useMemo(
86
+ () => (max.absolute - min.absolute) / 100,
87
+ [max.absolute, min.absolute]
88
+ )
80
89
  const [minPercent, setMinPercent] = useState(() =>
81
90
  percent(min.selected, min.absolute, max.absolute)
82
91
  )
@@ -85,21 +94,27 @@ const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
85
94
  percent(max.selected, min.absolute, max.absolute)
86
95
  )
87
96
 
88
- const { minVal, maxVal } = useMemo(() => {
89
- const widthPercent = (max.absolute - min.absolute) / 100
90
-
91
- return {
92
- minVal: min.absolute + minPercent * widthPercent,
93
- maxVal: min.absolute + maxPercent * widthPercent,
94
- }
95
- }, [min, max, maxPercent, minPercent])
97
+ const [minVal, setMinVal] = useState(() =>
98
+ Math.round(min.absolute + minPercent * widthPercent)
99
+ )
100
+ const [maxVal, setMaxVal] = useState(() =>
101
+ Math.round(min.absolute + maxPercent * widthPercent)
102
+ )
96
103
 
97
104
  useImperativeHandle(ref, () => ({
98
105
  setSliderValues: (values: { min: number; max: number }) => {
99
106
  const sliderMinValue = Math.min(Number(values.min), maxVal)
100
- const sliderMaxValue = Math.max(Number(values.max), minVal)
101
-
107
+ setMinVal(sliderMinValue)
102
108
  setMinPercent(percent(sliderMinValue, min.absolute, max.absolute))
109
+
110
+ if (values.max > max.absolute) {
111
+ setMaxVal(max.absolute)
112
+ setMaxPercent(percent(max.absolute, min.absolute, max.absolute))
113
+ return
114
+ }
115
+
116
+ const sliderMaxValue = Math.max(Number(values.max), minVal)
117
+ setMaxVal(sliderMaxValue)
103
118
  setMaxPercent(percent(sliderMaxValue, min.absolute, max.absolute))
104
119
  },
105
120
  }))
@@ -107,27 +122,25 @@ const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
107
122
  return (
108
123
  <div data-store-slider data-testid={testId} className={className}>
109
124
  <div
125
+ data-slider-range
110
126
  style={{
111
- left: `${minPercent < min.absolute ? min.absolute : minPercent}%`,
112
- width: `${
113
- maxPercent - minPercent > 100
114
- ? 100 - minPercent
115
- : maxPercent - minPercent
116
- }%`,
127
+ left: `${minPercent}%`,
128
+ width: `${maxPercent - minPercent}%`,
117
129
  }}
118
- data-slider-range
119
130
  />
120
131
  {minValueLabelComponent && minValueLabelComponent(minVal)}
121
132
  <input
122
133
  type="range"
123
- min={min.absolute}
124
- max={max.absolute}
134
+ min={Math.round(min.absolute)}
135
+ max={Math.round(max.absolute)}
125
136
  value={minVal}
137
+ step={step}
126
138
  onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
127
139
  onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
128
140
  onChange={(event) => {
129
141
  const minValue = Math.min(Number(event.target.value), maxVal)
130
142
 
143
+ setMinVal(minValue)
131
144
  setMinPercent(percent(minValue, min.absolute, max.absolute))
132
145
  onChange?.({ min: minValue, max: maxVal })
133
146
  }}
@@ -141,14 +154,16 @@ const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
141
154
  {maxValueLabelComponent && maxValueLabelComponent(maxVal)}
142
155
  <input
143
156
  type="range"
144
- min={min.absolute}
145
- max={max.absolute}
157
+ min={Math.round(min.absolute)}
158
+ max={Math.round(max.absolute)}
146
159
  value={maxVal}
160
+ step={step}
147
161
  onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
148
162
  onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
149
163
  onChange={(event) => {
150
164
  const maxValue = Math.max(Number(event.target.value), minVal)
151
165
 
166
+ setMaxVal(maxValue)
152
167
  setMaxPercent(percent(maxValue, min.absolute, max.absolute))
153
168
  onChange?.({ min: minVal, max: maxValue })
154
169
  }}
package/src/molecules/PriceRange/PriceRange.tsx CHANGED
@@ -36,6 +36,7 @@ const PriceRange = forwardRef<PriceRangeRefType | undefined, PriceRangeProps>(
36
36
  formatter,
37
37
  max,
38
38
  min,
39
+ step,
39
40
  onChange,
40
41
  onEnd,
41
42
  testId = 'store-price-range',
@@ -61,6 +62,7 @@ const PriceRange = forwardRef<PriceRangeRefType | undefined, PriceRangeProps>(
61
62
  ref={sliderRef}
62
63
  min={min}
63
64
  max={max}
65
+ step={step}
64
66
  onEnd={onEnd}
65
67
  aria-label={ariaLabel}
66
68
  onChange={(value) => onChange?.(value)}