feat(Slider): add support for dynamic updates with input

Author: kmcfaul

packages/react-core/src/components/Slider/Slider.tsx

@@ -56,6 +56,8 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   isDisabled?: boolean;
   /** Flag to show value input field. */
   isInputVisible?: boolean;
+  /** Flag indicating if the input value should also update the slider value as the user types. When false, the slider will update its value on blur or enter key press. */
+  isInputLive?: boolean;
   /** @deprecated Use startActions instead. Actions placed at the start of the slider. */
   leftActions?: React.ReactNode;
   /** Actions placed at the start of the slider. */
@@ -97,6 +99,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   isDisabled = false,
   isInputVisible = false,
   inputValue = 0,
+  isInputLive = false,
   inputLabel,
   inputAriaLabel = 'Slider value input',
   thumbAriaLabel = 'Value',
@@ -145,8 +148,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const widthChars = useMemo(() => localInputValue.toString().length, [localInputValue]);
   const inputStyle = { [cssFormControlWidthChars.name]: widthChars } as React.CSSProperties;
 
-  const onChangeHandler = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setLocalInputValue(Number(value));
+  const onChangeHandler = (event: React.FormEvent<HTMLInputElement>, value: string) => {
+    const newValue = Number(value);
+    setLocalInputValue(newValue);
+
+    isInputLive && onChange(event, localValue, newValue, setLocalInputValue);
   };
 
   const handleKeyPressOnInput = (event: React.KeyboardEvent) => {

packages/react-core/src/components/Slider/examples/SliderValueInput.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
+import { Checkbox, Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderValueInput: React.FunctionComponent = () => {
   const [valueDiscrete, setValueDiscrete] = useState(62.5);
@@ -8,6 +8,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
   const [inputValuePercent, setInputValuePercent] = useState(50);
   const [valueContinuous, setValueContinuous] = useState(50);
   const [inputValueContinuous, setInputValueContinuous] = useState(50);
+  const [isInputLive, setIsInputLive] = useState(false);
 
   const stepsDiscrete = [
     { value: 0, label: '0' },
@@ -154,9 +155,17 @@ export const SliderValueInput: React.FunctionComponent = () => {
 
   return (
     <>
+      <Checkbox
+        id="isInputLiveCheckbox"
+        label="isInputLive"
+        isChecked={isInputLive}
+        onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setIsInputLive(checked)}
+        style={{ marginBottom: 20 }}
+      />
       <Slider
         value={valueDiscrete}
         isInputVisible
+        isInputLive={isInputLive}
         inputValue={inputValueDiscrete}
         customSteps={stepsDiscrete}
         onChange={onChangeDiscrete}
@@ -165,6 +174,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
       <Slider
         value={valuePercent}
         isInputVisible
+        isInputLive={isInputLive}
         inputValue={inputValuePercent}
         inputLabel="%"
         onChange={onChangePercent}
@@ -174,6 +184,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
       <Slider
         value={valueContinuous}
         isInputVisible
+        isInputLive={isInputLive}
         inputValue={inputValueContinuous}
         inputLabel="%"
         onChange={onChangeContinuous}