Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 3d84498

Browse files
mj12albertmj12albert
committedFeb 4, 2025·
Round percentage values when drag ends
1 parent fc6e224 commit 3d84498

File tree

8 files changed

+58
-42
lines changed

8 files changed

+58
-42
lines changed
 

‎packages/react/src/slider/control/SliderControl.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NOOP } from '../../utils/noop';
66

77
const testRootContext: SliderRootContext = {
88
active: -1,
9-
handleInputChange: NOOP,
9+
commitValue: NOOP,
1010
dragging: false,
1111
disabled: false,
1212
getFingerState: () => ({
@@ -15,15 +15,14 @@ const testRootContext: SliderRootContext = {
1515
percentageValues: [0],
1616
thumbIndex: 0,
1717
}),
18-
setValue: NOOP,
18+
handleInputChange: NOOP,
1919
largeStep: 10,
2020
lastChangedValueRef: { current: null },
2121
thumbMap: new Map(),
2222
max: 100,
2323
min: 0,
2424
minStepsBetweenValues: 0,
2525
name: '',
26-
onValueCommitted: NOOP,
2726
orientation: 'horizontal',
2827
state: {
2928
activeThumbIndex: -1,
@@ -47,6 +46,7 @@ const testRootContext: SliderRootContext = {
4746
setDragging: NOOP,
4847
setPercentageValues: NOOP,
4948
setThumbMap: NOOP,
49+
setValue: NOOP,
5050
step: 1,
5151
tabIndex: null,
5252
thumbRefs: { current: [] },

‎packages/react/src/slider/control/SliderControl.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ const SliderControl = React.forwardRef(function SliderControl(
2121
const { render: renderProp, className, ...otherProps } = props;
2222

2323
const {
24+
commitValue,
2425
disabled,
2526
dragging,
2627
getFingerState,
2728
lastChangedValueRef,
2829
minStepsBetweenValues,
29-
onValueCommitted,
3030
percentageValues,
3131
registerSliderControl,
3232
setActive,
@@ -38,12 +38,12 @@ const SliderControl = React.forwardRef(function SliderControl(
3838
} = useSliderRootContext();
3939

4040
const { getRootProps } = useSliderControl({
41+
commitValue,
4142
disabled,
4243
dragging,
4344
getFingerState,
4445
lastChangedValueRef,
4546
minStepsBetweenValues,
46-
onValueCommitted,
4747
percentageValues,
4848
registerSliderControl,
4949
rootRef: forwardedRef,

‎packages/react/src/slider/control/useSliderControl.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function useSliderControl(
5151
getFingerState,
5252
lastChangedValueRef,
5353
minStepsBetweenValues,
54-
onValueCommitted,
54+
commitValue,
5555
percentageValues,
5656
registerSliderControl,
5757
rootRef: externalRef,
@@ -128,11 +128,9 @@ export function useSliderControl(
128128
setActive(-1);
129129

130130
commitValidation(lastChangedValueRef.current ?? finger.value);
131-
132-
onValueCommitted(lastChangedValueRef.current ?? finger.value, nativeEvent);
131+
commitValue(lastChangedValueRef.current ?? finger.value, nativeEvent);
133132

134133
touchIdRef.current = null;
135-
136134
// eslint-disable-next-line @typescript-eslint/no-use-before-define
137135
stopListening();
138136
});
@@ -280,7 +278,7 @@ export namespace useSliderControl {
280278
| 'getFingerState'
281279
| 'lastChangedValueRef'
282280
| 'minStepsBetweenValues'
283-
| 'onValueCommitted'
281+
| 'commitValue'
284282
| 'percentageValues'
285283
| 'registerSliderControl'
286284
| 'setActive'

‎packages/react/src/slider/indicator/SliderIndicator.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NOOP } from '../../utils/noop';
66

77
const testRootContext: SliderRootContext = {
88
active: -1,
9-
handleInputChange: NOOP,
9+
commitValue: NOOP,
1010
dragging: false,
1111
disabled: false,
1212
getFingerState: () => ({
@@ -15,15 +15,14 @@ const testRootContext: SliderRootContext = {
1515
percentageValues: [0],
1616
thumbIndex: 0,
1717
}),
18-
setValue: NOOP,
18+
handleInputChange: NOOP,
1919
largeStep: 10,
2020
lastChangedValueRef: { current: null },
2121
thumbMap: new Map(),
2222
max: 100,
2323
min: 0,
2424
minStepsBetweenValues: 0,
2525
name: '',
26-
onValueCommitted: NOOP,
2726
orientation: 'horizontal',
2827
state: {
2928
activeThumbIndex: -1,
@@ -47,6 +46,7 @@ const testRootContext: SliderRootContext = {
4746
setDragging: NOOP,
4847
setPercentageValues: NOOP,
4948
setThumbMap: NOOP,
49+
setValue: NOOP,
5050
step: 1,
5151
tabIndex: null,
5252
thumbRefs: { current: [] },

‎packages/react/src/slider/root/useSliderRoot.ts

+38-20
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { areArraysEqual } from '../../utils/areArraysEqual';
55
import { clamp } from '../../utils/clamp';
66
import { mergeReactProps } from '../../utils/mergeReactProps';
77
import { ownerDocument } from '../../utils/owner';
8+
import type { GenericHTMLProps } from '../../utils/types';
89
import { useControlled } from '../../utils/useControlled';
910
import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
1011
import { useEventCallback } from '../../utils/useEventCallback';
@@ -233,8 +234,22 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
233234
},
234235
);
235236

237+
// for pointer drag only
238+
const commitValue = useEventCallback((value: number | readonly number[], event: Event) => {
239+
if (Array.isArray(value)) {
240+
const newPercentageValues = [];
241+
for (let i = 0; i < value.length; i += 1) {
242+
newPercentageValues.push(valueToPercent(value[i], min, max));
243+
}
244+
} else if (typeof value === 'number') {
245+
setPercentageValues([valueToPercent(value, min, max)]);
246+
}
247+
onValueCommitted(value, event);
248+
});
249+
236250
const handleRootRef = useForkRef(rootRef, sliderRef);
237251

252+
// for keypresses only
238253
const handleInputChange = useEventCallback(
239254
(valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => {
240255
const newValue = getSliderValue(valueInput, index, min, max, range, values);
@@ -375,12 +390,13 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
375390

376391
return React.useMemo(
377392
() => ({
378-
getRootProps,
379393
'aria-labelledby': ariaLabelledby,
380394
active,
395+
commitValue,
381396
disabled,
382397
dragging,
383398
getFingerState,
399+
getRootProps,
384400
handleInputChange,
385401
largeStep,
386402
lastChangedValueRef,
@@ -404,12 +420,13 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
404420
values,
405421
}),
406422
[
407-
getRootProps,
408423
active,
409424
ariaLabelledby,
425+
commitValue,
410426
disabled,
411427
dragging,
412428
getFingerState,
429+
getRootProps,
413430
handleInputChange,
414431
largeStep,
415432
lastChangedValueRef,
@@ -535,34 +552,27 @@ export namespace useSliderRoot {
535552
}
536553

537554
export interface ReturnValue {
538-
getRootProps: (
539-
externalProps?: React.ComponentPropsWithRef<'div'>,
540-
) => React.ComponentPropsWithRef<'div'>;
541555
/**
542556
* The index of the active thumb.
543557
*/
544558
active: number;
545559
'aria-labelledby'?: string;
546-
handleInputChange: (
547-
valueInput: number,
548-
index: number,
549-
event: React.KeyboardEvent | React.ChangeEvent,
550-
) => void;
560+
/**
561+
* Callback fired when drag ends and invokes onValueCommitted.
562+
*/
563+
commitValue: (newValue: number | readonly number[], event: Event) => void;
551564
dragging: boolean;
552565
disabled: boolean;
553566
getFingerState: (
554567
fingerPosition: FingerPosition | null,
555568
shouldCaptureThumbIndex?: boolean,
556569
offset?: number,
557570
) => FingerState | null;
558-
/**
559-
* Callback to invoke change handlers after internal value state is updated.
560-
*/
561-
setValue: (
562-
newValue: number | number[],
563-
newPercentageValues: readonly number[],
564-
activeThumb: number,
565-
event: Event,
571+
getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
572+
handleInputChange: (
573+
valueInput: number,
574+
index: number,
575+
event: React.KeyboardEvent | React.ChangeEvent,
566576
) => void;
567577
/**
568578
* The large step value of the slider when incrementing or decrementing while the shift key is held,
@@ -584,23 +594,31 @@ export namespace useSliderRoot {
584594
*/
585595
minStepsBetweenValues: number;
586596
name: string;
587-
onValueCommitted: (value: number | readonly number[], event: Event) => void;
588597
/**
589598
* The component orientation.
590599
* @default 'horizontal'
591600
*/
592601
orientation: Orientation;
593-
registerSliderControl: (element: HTMLElement | null) => void;
594602
/**
595603
* The value(s) of the slider as percentages
596604
*/
597605
percentageValues: readonly number[];
606+
registerSliderControl: (element: HTMLElement | null) => void;
598607
setActive: React.Dispatch<React.SetStateAction<number>>;
599608
setDragging: React.Dispatch<React.SetStateAction<boolean>>;
600609
setPercentageValues: React.Dispatch<React.SetStateAction<readonly number[]>>;
601610
setThumbMap: React.Dispatch<
602611
React.SetStateAction<Map<Node, CompositeMetadata<ThumbMetadata> | null>>
603612
>;
613+
/**
614+
* Callback fired when dragging and invokes onValueChange.
615+
*/
616+
setValue: (
617+
newValue: number | number[],
618+
newPercentageValues: readonly number[],
619+
activeThumb: number,
620+
event: Event,
621+
) => void;
604622
/**
605623
* The step increment of the slider when incrementing or decrementing. It will snap
606624
* to multiples of this value. Decimal values are supported.

‎packages/react/src/slider/thumb/SliderThumb.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NOOP } from '../../utils/noop';
66

77
const testRootContext: SliderRootContext = {
88
active: -1,
9-
handleInputChange: NOOP,
9+
commitValue: NOOP,
1010
dragging: false,
1111
disabled: false,
1212
getFingerState: () => ({
@@ -15,15 +15,14 @@ const testRootContext: SliderRootContext = {
1515
percentageValues: [0],
1616
thumbIndex: 0,
1717
}),
18-
setValue: NOOP,
18+
handleInputChange: NOOP,
1919
largeStep: 10,
2020
lastChangedValueRef: { current: null },
2121
thumbMap: new Map(),
2222
max: 100,
2323
min: 0,
2424
minStepsBetweenValues: 0,
2525
name: '',
26-
onValueCommitted: NOOP,
2726
orientation: 'horizontal',
2827
state: {
2928
activeThumbIndex: -1,
@@ -47,6 +46,7 @@ const testRootContext: SliderRootContext = {
4746
setDragging: NOOP,
4847
setPercentageValues: NOOP,
4948
setThumbMap: NOOP,
49+
setValue: NOOP,
5050
step: 1,
5151
tabIndex: null,
5252
thumbRefs: { current: [] },

‎packages/react/src/slider/track/SliderTrack.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NOOP } from '../../utils/noop';
66

77
const testRootContext: SliderRootContext = {
88
active: -1,
9-
handleInputChange: NOOP,
9+
commitValue: NOOP,
1010
dragging: false,
1111
disabled: false,
1212
getFingerState: () => ({
@@ -15,15 +15,14 @@ const testRootContext: SliderRootContext = {
1515
percentageValues: [0],
1616
thumbIndex: 0,
1717
}),
18-
setValue: NOOP,
18+
handleInputChange: NOOP,
1919
largeStep: 10,
2020
lastChangedValueRef: { current: null },
2121
thumbMap: new Map(),
2222
max: 100,
2323
min: 0,
2424
minStepsBetweenValues: 0,
2525
name: '',
26-
onValueCommitted: NOOP,
2726
orientation: 'horizontal',
2827
state: {
2928
activeThumbIndex: -1,
@@ -47,6 +46,7 @@ const testRootContext: SliderRootContext = {
4746
setDragging: NOOP,
4847
setPercentageValues: NOOP,
4948
setThumbMap: NOOP,
49+
setValue: NOOP,
5050
step: 1,
5151
tabIndex: null,
5252
thumbRefs: { current: [] },

‎packages/react/src/slider/value/SliderValue.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { NOOP } from '../../utils/noop';
88

99
const testRootContext: SliderRootContext = {
1010
active: -1,
11-
handleInputChange: NOOP,
11+
commitValue: NOOP,
1212
dragging: false,
1313
disabled: false,
1414
getFingerState: () => ({
@@ -17,15 +17,14 @@ const testRootContext: SliderRootContext = {
1717
percentageValues: [0],
1818
thumbIndex: 0,
1919
}),
20-
setValue: NOOP,
20+
handleInputChange: NOOP,
2121
largeStep: 10,
2222
lastChangedValueRef: { current: null },
2323
thumbMap: new Map(),
2424
max: 100,
2525
min: 0,
2626
minStepsBetweenValues: 0,
2727
name: '',
28-
onValueCommitted: NOOP,
2928
orientation: 'horizontal',
3029
state: {
3130
activeThumbIndex: -1,
@@ -49,6 +48,7 @@ const testRootContext: SliderRootContext = {
4948
setDragging: NOOP,
5049
setPercentageValues: NOOP,
5150
setThumbMap: NOOP,
51+
setValue: NOOP,
5252
step: 1,
5353
tabIndex: null,
5454
thumbRefs: { current: [] },

0 commit comments

Comments
 (0)
Please sign in to comment.