From 2dde5491dc051883df06ba609d44d4c9fe6a5e39 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 7 Jul 2026 09:57:08 -0400
Subject: [PATCH 1/2] feat(Slider): add support for dynamic updates with input

---
 .../react-core/src/components/Slider/Slider.tsx     | 10 ++++++++--
 .../components/Slider/examples/SliderValueInput.tsx | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index 946f61b80e5..58ee781674f 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/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) => {
diff --git a/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx b/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx
index 21871042f8c..1fb8c154cdc 100644
--- a/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx
+++ b/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}

From 612939691643ef9675e171417ae42d75599b068b Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 7 Jul 2026 11:50:38 -0400
Subject: [PATCH 2/2] check onChange is passed before calling

---
 packages/react-core/src/components/Slider/Slider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index 58ee781674f..312ccec0335 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/src/components/Slider/Slider.tsx
@@ -152,7 +152,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     const newValue = Number(value);
     setLocalInputValue(newValue);
 
-    isInputLive && onChange(event, localValue, newValue, setLocalInputValue);
+    isInputLive && onChange && onChange(event, localValue, newValue, setLocalInputValue);
   };
 
   const handleKeyPressOnInput = (event: React.KeyboardEvent) => {