From 18997d00bb646f71ca6fd948eba5f6dc039c0923 Mon Sep 17 00:00:00 2001
From: Andy Vo <andyvo@bu.edu>
Date: Wed, 5 Oct 2022 10:16:07 -0700
Subject: [PATCH 1/4] chore(Slider): converted examples to typescript

---
 .../src/components/Slider/examples/Slider.md  | 140 +------------
 .../Slider/examples/SliderDiscrete.tsx        | 195 ++++++++++++++++++
 2 files changed, 196 insertions(+), 139 deletions(-)
 create mode 100644 packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx

diff --git a/packages/react-core/src/components/Slider/examples/Slider.md b/packages/react-core/src/components/Slider/examples/Slider.md
index d99a2c82038..f409fdd4e56 100644
--- a/packages/react-core/src/components/Slider/examples/Slider.md
+++ b/packages/react-core/src/components/Slider/examples/Slider.md
@@ -15,145 +15,7 @@ import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon'
 
 ### Discrete
 
-```js
-import React from 'react';
-import { Slider, Text, TextVariants } from '@patternfly/react-core';
-
-class DiscreteInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: 50,
-      value2: 50,
-      value3: 25,
-      value4: 50,
-      value5: 50,
-      value6: 3,
-      value7: 25
-    };
-
-    this.steps = [
-      { value: 0, label: '0' },
-      { value: 12.5, label: '1', isLabelHidden: true },
-      { value: 25, label: '2' },
-      { value: 37.5, label: '3', isLabelHidden: true },
-      { value: 50, label: '4' },
-      { value: 62.5, label: '5', isLabelHidden: true },
-      { value: 75, label: '6' },
-      { value: 87.5, label: '7', isLabelHidden: true },
-      { value: 100, label: '8' }
-    ];
-
-    this.stepsDiscreteWithMax = [
-      { value: 0, label: "A" },
-      { value: 1, label: "B" },
-      { value: 2, label: "C" },
-      { value: 3, label: "D" },
-      { value: 4, label: "E" },
-      { value: 5, label: "F" }
-    ];
-
-    this.stepsDiscreteNoLinearWithMaxMin = [
-      { value: 12, label: '12' },
-      { value: 15, label: '15' },
-      { value: 25, label: '25' },
-      { value: 54, label: '54' },
-      { value: 67, label: '67' },
-      { value: 86, label: '86' }
-  ];
-
-    this.onChange = value => {
-        this.setState({
-          value1: value
-        });
-    };
-
-    this.onChange2 = value => {
-        this.setState({
-          value2: value
-        });
-    };
-
-    this.onChange3 = value => {
-        this.setState({
-          value3: value
-        });
-    };
-
-    this.onChange4 = value => {
-        this.setState({
-          value4: value
-        });
-    };
-
-    this.onChange5 = value => {
-        this.setState({
-          value5: value
-        });
-    };
-
-    this.onChange6 = value => {
-        this.setState({
-          value6: value
-        });
-    };
-
-      this.onChange7 = value => {
-        this.setState({
-          value7: value
-        });
-    };
-  }
-
-  render() {
-    const step = this.steps.find(step => step.value === this.state.value1);
-    const displayValue = step ? step.label : 0;
-    return (
-      <>
-        <Text component={TextVariants.h3}>Slider value is: {displayValue}</Text>
-        <Slider value={this.state.value1} onChange={this.onChange} customSteps={this.steps} />
-        <br />
-        <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value2)}</Text>
-        <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
-        <Slider value={this.state.value2} onChange={this.onChange2} max={200} step={50} showTicks/>
-        <br />
-        <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value3)}</Text>
-        <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
-        <Slider value={this.state.value3} onChange={this.onChange3} min={-25} max={75} step={10} showTicks showBoundaries={false}/>
-        <br />
-        <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value4)}</Text>
-        <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
-        <Slider value={this.state.value4} onChange={this.onChange4} min={-25} max={75} step={10} showTicks />
-        <br />
-        <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value5)}</Text>
-        <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
-        <Slider value={this.state.value5} onChange={this.onChange5} min={-25} max={75} step={10} />
-        <br />
-        <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value6)}</Text>
-        <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
-        <Slider
-            value={this.state.value6}
-            showTicks
-            max={5}
-            customSteps={this.stepsDiscreteWithMax}
-            onChange={this.onChange6}
-          />
-        <br />
-        <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value7)}</Text>
-        <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
-        <Slider
-            value={this.state.value7}
-            showTicks
-            customSteps={this.stepsDiscreteNoLinearWithMaxMin}
-            onChange={this.onChange7}
-            min={12}
-            max={86}
-          />
-        <br />
-      </>
-    );
-  }
-}
+```ts file="./SliderDiscrete.tsx"
 ```
 
 ### Continuous
diff --git a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
new file mode 100644
index 00000000000..4b0e4858989
--- /dev/null
+++ b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
@@ -0,0 +1,195 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const DiscreteInput: React.FunctionComponent = () => {
+  const initialValues = {
+    value1: 50,
+    value2: 50,
+    value3: 25,
+    value4: 50,
+    value5: 50,
+    value6: 3,
+    value7: 25
+  };
+
+  const [numValue, setNumValue] = React.useState(initialValues);
+
+  const handleChange = (value: number, event) => {
+    const { name } = event.currentTarget;
+    setNumValue({ ...numValue, [name]: value });
+  };
+
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  // const stepsDiscreteWithMax = [
+  //   { value: 0, label: "A" },
+  //   { value: 1, label: "B" },
+  //   { value: 2, label: "C" },
+  //   { value: 3, label: "D" },
+  //   { value: 4, label: "E" },
+  //   { value: 5, label: "F" }
+  // ];
+
+  // const stepsDiscreteNoLinearWithMaxMin = [
+  //   { value: 12, label: '12' },
+  //   { value: 15, label: '15' },
+  //   { value: 25, label: '25' },
+  //   { value: 54, label: '54' },
+  //   { value: 67, label: '67' },
+  //   { value: 86, label: '86' }
+  // ];
+
+  return (
+    <>
+      <Text component={TextVariants.h3}>Slider value is: {initialValues.value1}</Text>
+      <Slider name="value1" value={initialValues.value1} onChange={handleChange} customSteps={steps} />
+      <br />
+    </>
+  );
+};
+
+// class DiscreteInput1 extends React.Component {
+//   constructor(props) {
+//     super(props);
+//     this.state = {
+//       value1: 50,
+//       value2: 50,
+//       value3: 25,
+//       value4: 50,
+//       value5: 50,
+//       value6: 3,
+//       value7: 25
+//     };
+
+//     this.steps = [
+//       { value: 0, label: '0' },
+//       { value: 12.5, label: '1', isLabelHidden: true },
+//       { value: 25, label: '2' },
+//       { value: 37.5, label: '3', isLabelHidden: true },
+//       { value: 50, label: '4' },
+//       { value: 62.5, label: '5', isLabelHidden: true },
+//       { value: 75, label: '6' },
+//       { value: 87.5, label: '7', isLabelHidden: true },
+//       { value: 100, label: '8' }
+//     ];
+
+//     this.stepsDiscreteWithMax = [
+//       { value: 0, label: "A" },
+//       { value: 1, label: "B" },
+//       { value: 2, label: "C" },
+//       { value: 3, label: "D" },
+//       { value: 4, label: "E" },
+//       { value: 5, label: "F" }
+//     ];
+
+//     this.stepsDiscreteNoLinearWithMaxMin = [
+//       { value: 12, label: '12' },
+//       { value: 15, label: '15' },
+//       { value: 25, label: '25' },
+//       { value: 54, label: '54' },
+//       { value: 67, label: '67' },
+//       { value: 86, label: '86' }
+//   ];
+
+//     this.onChange = value => {
+//         this.setState({
+//           value1: value
+//         });
+//     };
+
+//     this.onChange2 = value => {
+//         this.setState({
+//           value2: value
+//         });
+//     };
+
+//     this.onChange3 = value => {
+//         this.setState({
+//           value3: value
+//         });
+//     };
+
+//     this.onChange4 = value => {
+//         this.setState({
+//           value4: value
+//         });
+//     };
+
+//     this.onChange5 = value => {
+//         this.setState({
+//           value5: value
+//         });
+//     };
+
+//     this.onChange6 = value => {
+//         this.setState({
+//           value6: value
+//         });
+//     };
+
+//       this.onChange7 = value => {
+//         this.setState({
+//           value7: value
+//         });
+//     };
+//   }
+
+//   render() {
+//     const step = this.steps.find(step => step.value === this.state.value1);
+//     const displayValue = step ? step.label : 0;
+//     return (
+//       <>
+//         <Text component={TextVariants.h3}>Slider value is: {displayValue}</Text>
+//         <Slider value={this.state.value1} onChange={this.onChange} customSteps={this.steps} />
+//         <br />
+//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value2)}</Text>
+//         <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
+//         <Slider value={this.state.value2} onChange={this.onChange2} max={200} step={50} showTicks/>
+//         <br />
+//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value3)}</Text>
+//         <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
+//         <Slider value={this.state.value3} onChange={this.onChange3} min={-25} max={75} step={10} showTicks showBoundaries={false}/>
+//         <br />
+//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value4)}</Text>
+//         <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
+//         <Slider value={this.state.value4} onChange={this.onChange4} min={-25} max={75} step={10} showTicks />
+//         <br />
+//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value5)}</Text>
+//         <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
+//         <Slider value={this.state.value5} onChange={this.onChange5} min={-25} max={75} step={10} />
+//         <br />
+//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value6)}</Text>
+//         <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
+//         <Slider
+//             value={this.state.value6}
+//             showTicks
+//             max={5}
+//             customSteps={this.stepsDiscreteWithMax}
+//             onChange={this.onChange6}
+//           />
+//         <br />
+//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value7)}</Text>
+//         <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
+//         <Slider
+//             value={this.state.value7}
+//             showTicks
+//             customSteps={this.stepsDiscreteNoLinearWithMaxMin}
+//             onChange={this.onChange7}
+//             min={12}
+//             max={86}
+//           />
+//         <br />
+//       </>
+//     );
+//   }
+// }

From 0fc972737a0930dee075727f6916f973233ab15d Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Wed, 16 Nov 2022 17:08:27 -0500
Subject: [PATCH 2/4] chore(Slider): convert examples to typescript

---
 .../src/components/Slider/examples/Slider.md  | 446 +-----------------
 .../Slider/examples/SliderActions.tsx         |  97 ++++
 .../Slider/examples/SliderContinuous.tsx      |  34 ++
 .../Slider/examples/SliderDisabled.tsx        |  29 ++
 .../Slider/examples/SliderDiscrete.tsx        | 242 ++++------
 .../Slider/examples/SliderThumbValueInput.tsx |  41 ++
 .../Slider/examples/SliderValueInput.tsx      | 180 +++++++
 7 files changed, 473 insertions(+), 596 deletions(-)
 create mode 100644 packages/react-core/src/components/Slider/examples/SliderActions.tsx
 create mode 100644 packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
 create mode 100644 packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
 create mode 100644 packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx
 create mode 100644 packages/react-core/src/components/Slider/examples/SliderValueInput.tsx

diff --git a/packages/react-core/src/components/Slider/examples/Slider.md b/packages/react-core/src/components/Slider/examples/Slider.md
index f409fdd4e56..073228291a7 100644
--- a/packages/react-core/src/components/Slider/examples/Slider.md
+++ b/packages/react-core/src/components/Slider/examples/Slider.md
@@ -20,461 +20,25 @@ import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon'
 
 ### Continuous
 
-```js
-import React from 'react';
-import { Checkbox, Slider, Text, TextVariants } from '@patternfly/react-core';
-
-class ContinuousInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasTooltipOverThumb: false,
-      value: 50,
-      valueCustom: 50
-    };
-
-    this.onChange = value => {
-        this.setState({
-          value: value
-        });
-    };
-
-    this.onChangeCustom = value => {
-        this.setState({
-          valueCustom: value
-        });
-    };
-  }
-
-  render() {
-    return (
-      <>
-        <Checkbox
-          id="thumb-has-tooltip"
-          label="hasTooltipOverThumb"
-          isChecked={this.state.hasTooltipOverThumb}
-          onChange={hasTooltipOverThumb => this.setState({ hasTooltipOverThumb })}
-          style={{ marginBottom: 20 }} />
-        <Text component={TextVariants.h3}>Slider Value is: {this.state.value}</Text>
-        <Slider
-          hasTooltipOverThumb={this.state.hasTooltipOverThumb}
-          value={this.state.value}
-          onChange={this.onChange} />
-        <br />
-        <Text component={TextVariants.h3}>Slider value is: {this.state.valueCustom}</Text>
-        <Slider
-          onChange={this.onChangeCustom}
-          value={this.state.valueCustom}
-          areCustomStepsContinuous
-          hasTooltipOverThumb={this.state.hasTooltipOverThumb}
-          customSteps={[
-            { value: 0, label: '0%' },
-            { value: 100, label: '100%' }
-          ]}
-        />
-      </>
-    );
-  }
-}
+```ts file="./SliderContinuous.tsx"
 ```
 
 ### Value input
 
-```js
-import React from 'react';
-import { Slider } from '@patternfly/react-core';
-
-class ValueInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      valueDiscrete: 62.5,
-      inputValueDiscrete: 5,
-      valuePercent: 50,
-      inputValuePercent: 50,
-      valueContinuous: 50,
-      inputValueContinuous: 50
-    };
-
-    this.stepsDiscrete = [
-      { value: 0, label: '0' },
-      { value: 12.5, label: '1', isLabelHidden: true },
-      { value: 25, label: '2' },
-      { value: 37.5, label: '3', isLabelHidden: true },
-      { value: 50, label: '4' },
-      { value: 62.5, label: '5', isLabelHidden: true },
-      { value: 75, label: '6' },
-      { value: 87.5, label: '7', isLabelHidden: true },
-      { value: 100, label: '8' }
-    ];
-
-    this.stepsPercent = [
-      { value: 0, label: '0%' },
-      { value: 25, label: '25%', isLabelHidden: true },
-      { value: 50, label: '50%' },
-      { value: 75, label: '75%', isLabelHidden: true },
-      { value: 100, label: '100%' }
-    ];
-
-    this.onChangeDiscrete = (value, inputValue, setLocalInputValue) => {
-
-      let newValue;
-      let newInputValue;
-
-      if (inputValue === undefined) { 
-        const step = this.stepsDiscrete.find(step => step.value === value);
-        newInputValue = step ? step.label : 0;
-        newInputValue = Number(newInputValue);
-        newValue = value;
-      } else {
-        const maxValue =  Number(this.stepsDiscrete[this.stepsDiscrete.length -1].label);
-        if (inputValue > maxValue) {
-          newValue = Number(this.stepsDiscrete[this.stepsDiscrete.length -1].value);
-          newInputValue =  maxValue;
-          setLocalInputValue(maxValue);
-        } else {
-          const minValue =  Number(this.stepsDiscrete[0].label);
-          if (inputValue < minValue) {
-            newValue = Number(this.stepsDiscrete[0].value);
-            newInputValue =  minValue;
-            setLocalInputValue(minValue);
-          } else {
-            const stepIndex = this.stepsDiscrete.findIndex(step => Number(step.label) >= inputValue);
-            if (Number(this.stepsDiscrete[stepIndex].label) === inputValue) {
-              newValue = this.stepsDiscrete[stepIndex].value;
-              newInputValue = inputValue;
-            } else {
-              const midpoint = (Number(this.stepsDiscrete[stepIndex].label) + Number(this.stepsDiscrete[stepIndex - 1].label)) / 2;
-              if (midpoint > inputValue) {
-                newValue = this.stepsDiscrete[stepIndex - 1].value;
-                newInputValue = Number(this.stepsDiscrete[stepIndex - 1].label);
-              } else {
-                newValue = this.stepsDiscrete[stepIndex].value;
-                newInputValue = Number(this.stepsDiscrete[stepIndex].label);
-              }
-            }
-          }
-        }
-      }
-
-      this.setState({
-        inputValueDiscrete: newInputValue,
-        valueDiscrete: newValue
-      });
-    };
-
-    this.onChangePercent = (value, inputValue, setLocalInputValue) => {
-      let newValue;
-      let newInputValue;
-
-      if (inputValue === undefined) { 
-        const step = this.stepsPercent.find(step => step.value === value);
-        newInputValue = step ? step.label.slice(0, -1) : 0;
-        newInputValue = Number(newInputValue);
-        newValue = value;
-      } else {
-        const maxValue =  Number(this.stepsPercent[this.stepsPercent.length -1].label.slice(0, -1));
-        if (inputValue > maxValue) {
-          newValue = Number(this.stepsPercent[this.stepsPercent.length -1].value);
-          newInputValue =  maxValue;
-          setLocalInputValue(maxValue);
-        } else {
-          const minValue =  Number(this.stepsPercent[0].label.slice(0, -1));
-          if (inputValue < minValue) {
-            newValue = minValue;
-            setLocalInputValue(minValue);
-          } else {
-            const stepIndex = this.stepsPercent.findIndex(step => Number(step.label.slice(0, -1)) >= inputValue);
-            if (Number(this.stepsPercent[stepIndex].label.slice(0, -1)) === inputValue) {
-              newValue = this.stepsPercent[stepIndex].value;
-              newInputValue = inputValue;
-            } else {
-              const midpoint = (Number(this.stepsPercent[stepIndex].label.slice(0, -1)) + Number(this.stepsPercent[stepIndex - 1].label.slice(0, -1))) / 2;
-              if (midpoint > inputValue) {
-                newValue = this.stepsPercent[stepIndex - 1].value;
-                newInputValue = Number(this.stepsPercent[stepIndex - 1].label.slice(0, -1));
-              } else {
-                newValue = this.stepsPercent[stepIndex].value;
-                newInputValue = Number(this.stepsPercent[stepIndex].label.slice(0, -1));
-              }
-            }
-          }
-        }
-      }
-      
-      this.setState({
-        inputValuePercent: newInputValue,
-        valuePercent: newValue
-      });
-    };
-
-    this.onChangeContinuous = (value, inputValue, setLocalInputValue) => { 
-      let newValue;
-      if (inputValue === undefined) { 
-        newValue = Math.floor(value);
-      } else {
-        if (inputValue > 100) {
-          newValue = 100;
-          setLocalInputValue(100);
-        } else if (inputValue < 0) {
-          newValue = 0;
-          setLocalInputValue(0);
-        } else {
-          newValue = Math.floor(inputValue);
-        }
-      }
-      this.setState({
-        inputValueContinuous: newValue,
-        valueContinuous: newValue
-      });
-    };
-  }
-
-  render() {
-    return (
-      <>
-        <Slider
-          value={this.state.valueDiscrete}
-          isInputVisible
-          inputValue={this.state.inputValueDiscrete}
-          customSteps={this.stepsDiscrete}
-          onChange={this.onChangeDiscrete}
-        />
-        <br />
-        <Slider
-          value={this.state.valuePercent}
-          isInputVisible
-          inputValue={this.state.inputValuePercent}
-          inputLabel="%"
-          onChange={this.onChangePercent}
-          customSteps={this.stepsPercent}
-        />
-        <br />
-        <Slider
-          value={this.state.valueContinuous}
-          isInputVisible
-          inputValue={this.state.inputValueContinuous}
-          inputLabel="%"
-          onChange={this.onChangeContinuous}
-        />
-      </>
-    );
-  }
-}
+```ts file="./SliderValueInput.tsx"
 ```
 
 ### Thumb value input
 
-```js
-import React from 'react';
-import { Slider } from '@patternfly/react-core';
-
-class ThumbValueInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 50,
-      inputValue: 50
-    };
-
-    this.onChange = (value, inputValue, setLocalInputValue) => { 
-      let newValue;
-      if (inputValue === undefined) { 
-        newValue = Number(value);
-      } else {
-        if (inputValue > 100) {
-          newValue = 100;
-          setLocalInputValue(100);
-        } else if (inputValue < 0) {
-          newValue = 0;
-          setLocalInputValue(0);
-        } else {
-          newValue = Math.floor(inputValue);
-        }
-      }
-      this.setState({
-        value: newValue,
-        inputValue: newValue
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Slider
-        value={this.state.value}
-        isInputVisible
-        inputValue={this.state.inputValue}
-        inputLabel="%"
-        inputPosition="aboveThumb"
-        onChange={this.onChange}
-      />
-    );
-  }
-}
+```ts file="./SliderThumbValueInput.tsx"
 ```
 
 ### Actions
 
-```js
-import React from 'react';
-import { Slider, Button, Text, TextVariants } from '@patternfly/react-core';
-import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
-import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';
-
-class SliderActions extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: 50,
-      value2: 50,
-      inputValue: 50,
-      isDisabled: false
-    };
-
-    this.onChange1 = value => {
-      const newValue = Math.floor(Number(value));
-      this.setState({
-        value1: newValue
-      });
-    };
-
-    this.onChange2 =(value, inputValue, setLocalInputValue) => { 
-      let newValue;
-      if (inputValue === undefined) { 
-        newValue = Math.floor(Number(value));
-      } else {
-        if (inputValue > 100) {
-          newValue = 100;
-          setLocalInputValue(100);
-        } else if (inputValue < 0) {
-          newValue = 0;
-          setLocalInputValue(0);
-        } else {
-          newValue = Math.floor(inputValue);
-        }
-      }
-      this.setState({
-        value2: newValue,
-        inputValue: newValue
-      });
-    };
-
-    this.onClick = () => {
-      this.setState({
-        isDisabled: !this.state.isDisabled
-      });
-    };
-
-    this.onMinusClick = () => {
-      const newValue = this.state.value1 - 1;
-      if (newValue >= 0) {
-        this.setState({
-          value1: newValue
-        });
-      }
-    };
-
-    this.onPlusClick = () => {
-      const newValue = this.state.value1 + 1;
-      if (newValue <= 100) {
-        this.setState({
-          value1: newValue
-        });
-      }
-    };
-  }
-
-  render() {
-    const disabledAction = (
-      <Button variant="plain" aria-label="Lock" onClick={this.onClick}>
-        <LockIcon />
-      </Button>
-    );
-
-    const enabledAction = (
-      <Button variant="plain" aria-label="Unlock" onClick={this.onClick}>
-        <LockOpenIcon />
-      </Button>
-    );
-
-    return (
-      <>
-        <Text component={TextVariants.h3}>Slider value is: {this.state.value1}</Text>
-        <Slider
-          value={this.state.value1}
-          onChange={this.onChange1}
-          leftActions={
-            <Button variant="plain" aria-label="Minus" onClick={this.onMinusClick}>
-              <MinusIcon />
-            </Button>
-          }
-          rightActions={
-            <Button variant="plain" aria-label="Plus" onClick={this.onPlusClick}>
-              <PlusIcon />
-            </Button>
-          }
-        />
-        <br />
-        <br />
-        <Slider
-          value={this.state.value2}
-          inputValue={this.state.inputValue}
-          onChange={this.onChange2}
-          inputLabel="%"
-          isInputVisible
-          isDisabled={this.state.isDisabled}
-          rightActions={this.state.isDisabled ? disabledAction : enabledAction}
-        />
-      </>
-    );
-  }
-}
+```ts file="./SliderActions.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { Slider, Text, TextVariants } from '@patternfly/react-core';
-
-class DiscreteInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 50
-    };
-
-    this.steps = [
-      { value: 0, label: '0' },
-      { value: 12.5, label: '1', isLabelHidden: true },
-      { value: 25, label: '2' },
-      { value: 37.5, label: '3', isLabelHidden: true },
-      { value: 50, label: '4' },
-      { value: 62.5, label: '5', isLabelHidden: true },
-      { value: 75, label: '6' },
-      { value: 87.5, label: '7', isLabelHidden: true },
-      { value: 100, label: '8' }
-    ];
-
-    this.onValueChange = value => {
-        this.setState({
-          value
-        });
-    };
-  }
-
-  render() {
-    const step = this.steps.find(step => step.value === this.state.value);
-    const displayValue = step ? step.label : 0;
-    return (
-      <>
-        <Text component={TextVariants.h3}>Slider value is: {displayValue}</Text>
-        <Slider isDisabled value={this.state.value} onChange={this.onValueChange} customSteps={this.steps} />
-      </>
-    );
-  }
-}
+```ts file="./SliderDisabled.tsx"
 ```
diff --git a/packages/react-core/src/components/Slider/examples/SliderActions.tsx b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
new file mode 100644
index 00000000000..d381cbf7395
--- /dev/null
+++ b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Slider, Button, Text, TextVariants } from '@patternfly/react-core';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
+import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';
+
+export const SliderActions: React.FunctionComponent = () => {
+  const [value1, setValue1] = React.useState(50);
+  const [value2, setValue2] = React.useState(50);
+  const [inputValue, setInputValue] = React.useState(50);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+
+  const onChange1 = (value: number) => {
+    setValue1(Math.floor(Number(value)));
+  };
+
+  const onChange2 = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Math.floor(Number(value));
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setValue2(newValue);
+    setInputValue(newValue);
+  };
+
+  const onMinusClick = () => {
+    const newValue = value1 - 1;
+    if (newValue >= 0) {
+      setValue1(newValue);
+    }
+  };
+
+  const onPlusClick = () => {
+    const newValue = value1 + 1;
+    if (newValue <= 100) {
+      setValue1(newValue);
+    }
+  };
+
+  const disabledAction = (
+    <Button variant="plain" aria-label="Lock" onClick={() => setIsDisabled(!isDisabled)}>
+      <LockIcon />
+    </Button>
+  );
+
+  const enabledAction = (
+    <Button variant="plain" aria-label="Unlock" onClick={() => setIsDisabled(!isDisabled)}>
+      <LockOpenIcon />
+    </Button>
+  );
+
+  return (
+    <>
+      <Text component={TextVariants.h3}>Slider value is: {value1}</Text>
+      <Slider
+        value={value1}
+        onChange={onChange1}
+        leftActions={
+          <Button variant="plain" aria-label="Minus" onClick={onMinusClick}>
+            <MinusIcon />
+          </Button>
+        }
+        rightActions={
+          <Button variant="plain" aria-label="Plus" onClick={onPlusClick}>
+            <PlusIcon />
+          </Button>
+        }
+      />
+      <br />
+      <br />
+      <Slider
+        value={value2}
+        inputValue={inputValue}
+        onChange={onChange2}
+        inputLabel="%"
+        isInputVisible
+        isDisabled={isDisabled}
+        rightActions={isDisabled ? disabledAction : enabledAction}
+      />
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
new file mode 100644
index 00000000000..4cb7f31aea5
--- /dev/null
+++ b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Checkbox, Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const ContinuousInput: React.FunctionComponent = () => {
+  const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
+  const [value, setValue] = React.useState(50);
+  const [valueCustom, setValueCustom] = React.useState(50);
+
+  return (
+    <>
+      <Checkbox
+        id="thumb-has-tooltip"
+        label="hasTooltipOverThumb"
+        isChecked={hasTooltipOverThumb}
+        onChange={setHasTooltipOverThumb}
+        style={{ marginBottom: 20 }}
+      />
+      <Text component={TextVariants.h3}>Slider Value is: {value}</Text>
+      <Slider hasTooltipOverThumb={hasTooltipOverThumb} value={value} onChange={setValue} />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>
+      <Slider
+        onChange={setValueCustom}
+        value={valueCustom}
+        areCustomStepsContinuous
+        hasTooltipOverThumb={hasTooltipOverThumb}
+        customSteps={[
+          { value: 0, label: '0%' },
+          { value: 100, label: '100%' }
+        ]}
+      />
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
new file mode 100644
index 00000000000..e0f88c1e6c3
--- /dev/null
+++ b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderActions: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(50);
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const displayValue = () => {
+    const step = steps.find(step => step.value === value);
+    return step ? step.label : 0;
+  };
+
+  return (
+    <>
+      <Text component={TextVariants.h3}>Slider value is: {displayValue()}</Text>
+      <Slider isDisabled value={value} onChange={setValue} customSteps={steps} />
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
index 4b0e4858989..6c14ea73e38 100644
--- a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
@@ -14,8 +14,7 @@ export const DiscreteInput: React.FunctionComponent = () => {
 
   const [numValue, setNumValue] = React.useState(initialValues);
 
-  const handleChange = (value: number, event) => {
-    const { name } = event.currentTarget;
+  const handleChange = (value: number, name: string) => {
     setNumValue({ ...numValue, [name]: value });
   };
 
@@ -31,165 +30,98 @@ export const DiscreteInput: React.FunctionComponent = () => {
     { value: 100, label: '8' }
   ];
 
-  // const stepsDiscreteWithMax = [
-  //   { value: 0, label: "A" },
-  //   { value: 1, label: "B" },
-  //   { value: 2, label: "C" },
-  //   { value: 3, label: "D" },
-  //   { value: 4, label: "E" },
-  //   { value: 5, label: "F" }
-  // ];
+  const stepsDiscreteWithMax = [
+    { value: 0, label: 'A' },
+    { value: 1, label: 'B' },
+    { value: 2, label: 'C' },
+    { value: 3, label: 'D' },
+    { value: 4, label: 'E' },
+    { value: 5, label: 'F' }
+  ];
 
-  // const stepsDiscreteNoLinearWithMaxMin = [
-  //   { value: 12, label: '12' },
-  //   { value: 15, label: '15' },
-  //   { value: 25, label: '25' },
-  //   { value: 54, label: '54' },
-  //   { value: 67, label: '67' },
-  //   { value: 86, label: '86' }
-  // ];
+  const stepsDiscreteNoLinearWithMaxMin = [
+    { value: 12, label: '12' },
+    { value: 15, label: '15' },
+    { value: 25, label: '25' },
+    { value: 54, label: '54' },
+    { value: 67, label: '67' },
+    { value: 86, label: '86' }
+  ];
 
   return (
     <>
       <Text component={TextVariants.h3}>Slider value is: {initialValues.value1}</Text>
-      <Slider name="value1" value={initialValues.value1} onChange={handleChange} customSteps={steps} />
+      <Slider
+        name="value1"
+        value={initialValues.value1}
+        onChange={(value: number) => handleChange(value, 'value1')}
+        customSteps={steps}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {initialValues.value2}</Text>
+      <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
+      <Slider
+        value={initialValues.value2}
+        onChange={(value: number) => handleChange(value, 'value2')}
+        max={200}
+        step={50}
+        showTicks
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value3)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
+      <Slider
+        value={initialValues.value3}
+        onChange={(value: number) => handleChange(value, 'value3')}
+        min={-25}
+        max={75}
+        step={10}
+        showTicks
+        showBoundaries={false}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value4)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
+      <Slider
+        value={initialValues.value4}
+        onChange={(value: number) => handleChange(value, 'value4')}
+        min={-25}
+        max={75}
+        step={10}
+        showTicks
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value5)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
+      <Slider
+        value={initialValues.value5}
+        onChange={(value: number) => handleChange(value, 'value5')}
+        min={-25}
+        max={75}
+        step={10}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value6)}</Text>
+      <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
+      <Slider
+        value={initialValues.value6}
+        showTicks
+        max={5}
+        customSteps={stepsDiscreteWithMax}
+        onChange={(value: number) => handleChange(value, 'value6')}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value7)}</Text>
+      <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
+      <Slider
+        value={initialValues.value7}
+        showTicks
+        customSteps={stepsDiscreteNoLinearWithMaxMin}
+        onChange={(value: number) => handleChange(value, 'value7')}
+        min={12}
+        max={86}
+      />
       <br />
     </>
   );
 };
-
-// class DiscreteInput1 extends React.Component {
-//   constructor(props) {
-//     super(props);
-//     this.state = {
-//       value1: 50,
-//       value2: 50,
-//       value3: 25,
-//       value4: 50,
-//       value5: 50,
-//       value6: 3,
-//       value7: 25
-//     };
-
-//     this.steps = [
-//       { value: 0, label: '0' },
-//       { value: 12.5, label: '1', isLabelHidden: true },
-//       { value: 25, label: '2' },
-//       { value: 37.5, label: '3', isLabelHidden: true },
-//       { value: 50, label: '4' },
-//       { value: 62.5, label: '5', isLabelHidden: true },
-//       { value: 75, label: '6' },
-//       { value: 87.5, label: '7', isLabelHidden: true },
-//       { value: 100, label: '8' }
-//     ];
-
-//     this.stepsDiscreteWithMax = [
-//       { value: 0, label: "A" },
-//       { value: 1, label: "B" },
-//       { value: 2, label: "C" },
-//       { value: 3, label: "D" },
-//       { value: 4, label: "E" },
-//       { value: 5, label: "F" }
-//     ];
-
-//     this.stepsDiscreteNoLinearWithMaxMin = [
-//       { value: 12, label: '12' },
-//       { value: 15, label: '15' },
-//       { value: 25, label: '25' },
-//       { value: 54, label: '54' },
-//       { value: 67, label: '67' },
-//       { value: 86, label: '86' }
-//   ];
-
-//     this.onChange = value => {
-//         this.setState({
-//           value1: value
-//         });
-//     };
-
-//     this.onChange2 = value => {
-//         this.setState({
-//           value2: value
-//         });
-//     };
-
-//     this.onChange3 = value => {
-//         this.setState({
-//           value3: value
-//         });
-//     };
-
-//     this.onChange4 = value => {
-//         this.setState({
-//           value4: value
-//         });
-//     };
-
-//     this.onChange5 = value => {
-//         this.setState({
-//           value5: value
-//         });
-//     };
-
-//     this.onChange6 = value => {
-//         this.setState({
-//           value6: value
-//         });
-//     };
-
-//       this.onChange7 = value => {
-//         this.setState({
-//           value7: value
-//         });
-//     };
-//   }
-
-//   render() {
-//     const step = this.steps.find(step => step.value === this.state.value1);
-//     const displayValue = step ? step.label : 0;
-//     return (
-//       <>
-//         <Text component={TextVariants.h3}>Slider value is: {displayValue}</Text>
-//         <Slider value={this.state.value1} onChange={this.onChange} customSteps={this.steps} />
-//         <br />
-//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value2)}</Text>
-//         <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
-//         <Slider value={this.state.value2} onChange={this.onChange2} max={200} step={50} showTicks/>
-//         <br />
-//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value3)}</Text>
-//         <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
-//         <Slider value={this.state.value3} onChange={this.onChange3} min={-25} max={75} step={10} showTicks showBoundaries={false}/>
-//         <br />
-//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value4)}</Text>
-//         <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
-//         <Slider value={this.state.value4} onChange={this.onChange4} min={-25} max={75} step={10} showTicks />
-//         <br />
-//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value5)}</Text>
-//         <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
-//         <Slider value={this.state.value5} onChange={this.onChange5} min={-25} max={75} step={10} />
-//         <br />
-//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value6)}</Text>
-//         <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
-//         <Slider
-//             value={this.state.value6}
-//             showTicks
-//             max={5}
-//             customSteps={this.stepsDiscreteWithMax}
-//             onChange={this.onChange6}
-//           />
-//         <br />
-//         <Text component={TextVariants.h3}>Slider value is: {Math.floor(this.state.value7)}</Text>
-//         <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
-//         <Slider
-//             value={this.state.value7}
-//             showTicks
-//             customSteps={this.stepsDiscreteNoLinearWithMaxMin}
-//             onChange={this.onChange7}
-//             min={12}
-//             max={86}
-//           />
-//         <br />
-//       </>
-//     );
-//   }
-// }
diff --git a/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx b/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx
new file mode 100644
index 00000000000..ee17f5d7898
--- /dev/null
+++ b/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Slider } from '@patternfly/react-core';
+
+export const SliderThumbValueInput: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(50);
+  const [inputValue, setInputValue] = React.useState(50);
+
+  const onChange = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Number(value);
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setValue(newValue);
+    setInputValue(newValue);
+  };
+
+  return (
+    <Slider
+      value={value}
+      isInputVisible
+      inputValue={inputValue}
+      inputLabel="%"
+      inputPosition="aboveThumb"
+      onChange={onChange}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx b/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx
new file mode 100644
index 00000000000..67e0c468d1d
--- /dev/null
+++ b/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import { Slider } from '@patternfly/react-core';
+
+export const SliderValueInput: React.FunctionComponent = () => {
+  const [valueDiscrete, setValueDiscrete] = React.useState(62.5);
+  const [inputValueDiscrete, setInputValueDiscrete] = React.useState(5);
+  const [valuePercent, setValuePercent] = React.useState(50);
+  const [inputValuePercent, setInputValuePercent] = React.useState(50);
+  const [valueContinuous, setValueContinuous] = React.useState(50);
+  const [inputValueContinuous, setInputValueContinuous] = React.useState(50);
+
+  const stepsDiscrete = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+  const stepsPercent = [
+    { value: 0, label: '0%' },
+    { value: 25, label: '25%', isLabelHidden: true },
+    { value: 50, label: '50%' },
+    { value: 75, label: '75%', isLabelHidden: true },
+    { value: 100, label: '100%' }
+  ];
+
+  const onChangeDiscrete = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    let newInputValue;
+
+    if (inputValue === undefined) {
+      const step = stepsDiscrete.find(step => step.value === value);
+      newInputValue = step ? step.label : 0;
+      newInputValue = Number(newInputValue);
+      newValue = value;
+    } else {
+      const maxValue = Number(stepsDiscrete[stepsDiscrete.length - 1].label);
+      if (inputValue > maxValue) {
+        newValue = Number(stepsDiscrete[stepsDiscrete.length - 1].value);
+        newInputValue = maxValue;
+        setLocalInputValue(maxValue);
+      } else {
+        const minValue = Number(stepsDiscrete[0].label);
+        if (inputValue < minValue) {
+          newValue = Number(stepsDiscrete[0].value);
+          newInputValue = minValue;
+          setLocalInputValue(minValue);
+        } else {
+          const stepIndex = stepsDiscrete.findIndex(step => Number(step.label) >= inputValue);
+          if (Number(stepsDiscrete[stepIndex].label) === inputValue) {
+            newValue = stepsDiscrete[stepIndex].value;
+            newInputValue = inputValue;
+          } else {
+            const midpoint = (Number(stepsDiscrete[stepIndex].label) + Number(stepsDiscrete[stepIndex - 1].label)) / 2;
+            if (midpoint > inputValue) {
+              newValue = stepsDiscrete[stepIndex - 1].value;
+              newInputValue = Number(stepsDiscrete[stepIndex - 1].label);
+            } else {
+              newValue = stepsDiscrete[stepIndex].value;
+              newInputValue = Number(stepsDiscrete[stepIndex].label);
+            }
+          }
+        }
+      }
+    }
+
+    setInputValueDiscrete(newInputValue);
+    setValueDiscrete(newValue);
+  };
+
+  const onChangePercent = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    let newInputValue;
+
+    if (inputValue === undefined) {
+      const step = stepsPercent.find(step => step.value === value);
+      newInputValue = step ? step.label.slice(0, -1) : 0;
+      newInputValue = Number(newInputValue);
+      newValue = value;
+    } else {
+      const maxValue = Number(stepsPercent[stepsPercent.length - 1].label.slice(0, -1));
+      if (inputValue > maxValue) {
+        newValue = Number(stepsPercent[stepsPercent.length - 1].value);
+        newInputValue = maxValue;
+        setLocalInputValue(maxValue);
+      } else {
+        const minValue = Number(stepsPercent[0].label.slice(0, -1));
+        if (inputValue < minValue) {
+          newValue = minValue;
+          setLocalInputValue(minValue);
+        } else {
+          const stepIndex = stepsPercent.findIndex(step => Number(step.label.slice(0, -1)) >= inputValue);
+          if (Number(stepsPercent[stepIndex].label.slice(0, -1)) === inputValue) {
+            newValue = stepsPercent[stepIndex].value;
+            newInputValue = inputValue;
+          } else {
+            const midpoint =
+              (Number(stepsPercent[stepIndex].label.slice(0, -1)) +
+                Number(stepsPercent[stepIndex - 1].label.slice(0, -1))) /
+              2;
+            if (midpoint > inputValue) {
+              newValue = stepsPercent[stepIndex - 1].value;
+              newInputValue = Number(stepsPercent[stepIndex - 1].label.slice(0, -1));
+            } else {
+              newValue = stepsPercent[stepIndex].value;
+              newInputValue = Number(stepsPercent[stepIndex].label.slice(0, -1));
+            }
+          }
+        }
+      }
+    }
+
+    setInputValuePercent(newInputValue);
+    setValuePercent(newValue);
+  };
+
+  const onChangeContinuous = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Math.floor(value);
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setInputValueContinuous(newValue);
+    setValueContinuous(newValue);
+  };
+
+  return (
+    <>
+      <Slider
+        value={valueDiscrete}
+        isInputVisible
+        inputValue={inputValueDiscrete}
+        customSteps={stepsDiscrete}
+        onChange={onChangeDiscrete}
+      />
+      <br />
+      <Slider
+        value={valuePercent}
+        isInputVisible
+        inputValue={inputValuePercent}
+        inputLabel="%"
+        onChange={onChangePercent}
+        customSteps={stepsPercent}
+      />
+      <br />
+      <Slider
+        value={valueContinuous}
+        isInputVisible
+        inputValue={inputValueContinuous}
+        inputLabel="%"
+        onChange={onChangeContinuous}
+      />
+    </>
+  );
+};

From 83a082dcd74f872a23f8c17f829958cd49b8064c Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Wed, 4 Jan 2023 22:46:33 -0500
Subject: [PATCH 3/4] update per PR comments

---
 .../src/components/Slider/examples/SliderActions.tsx | 12 +++---------
 .../components/Slider/examples/SliderContinuous.tsx  |  2 +-
 .../components/Slider/examples/SliderDisabled.tsx    |  2 +-
 .../components/Slider/examples/SliderDiscrete.tsx    |  5 ++---
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/react-core/src/components/Slider/examples/SliderActions.tsx b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
index d381cbf7395..ec6e19efba6 100644
--- a/packages/react-core/src/components/Slider/examples/SliderActions.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
@@ -52,18 +52,12 @@ export const SliderActions: React.FunctionComponent = () => {
     }
   };
 
-  const disabledAction = (
-    <Button variant="plain" aria-label="Lock" onClick={() => setIsDisabled(!isDisabled)}>
+  const buildAction = (isDisabled: boolean) => (
+    <Button variant="plain" aria-label={isDisabled ? "Lock" : "Unlock"} onClick={() => setIsDisabled(!isDisabled)}>
       <LockIcon />
     </Button>
   );
 
-  const enabledAction = (
-    <Button variant="plain" aria-label="Unlock" onClick={() => setIsDisabled(!isDisabled)}>
-      <LockOpenIcon />
-    </Button>
-  );
-
   return (
     <>
       <Text component={TextVariants.h3}>Slider value is: {value1}</Text>
@@ -90,7 +84,7 @@ export const SliderActions: React.FunctionComponent = () => {
         inputLabel="%"
         isInputVisible
         isDisabled={isDisabled}
-        rightActions={isDisabled ? disabledAction : enabledAction}
+        rightActions={buildAction(isDisabled)}
       />
     </>
   );
diff --git a/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
index 4cb7f31aea5..da1a370a46a 100644
--- a/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Checkbox, Slider, Text, TextVariants } from '@patternfly/react-core';
 
-export const ContinuousInput: React.FunctionComponent = () => {
+export const SliderContinuous: React.FunctionComponent = () => {
   const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
   const [value, setValue] = React.useState(50);
   const [valueCustom, setValueCustom] = React.useState(50);
diff --git a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
index e0f88c1e6c3..4f30a720d02 100644
--- a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Slider, Text, TextVariants } from '@patternfly/react-core';
 
-export const SliderActions: React.FunctionComponent = () => {
+export const SliderDisabled: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(50);
   const steps = [
     { value: 0, label: '0' },
diff --git a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
index 6c14ea73e38..d41db278f30 100644
--- a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Slider, Text, TextVariants } from '@patternfly/react-core';
 
-export const DiscreteInput: React.FunctionComponent = () => {
+export const SliderDiscrete: React.FunctionComponent = () => {
   const initialValues = {
     value1: 50,
     value2: 50,
@@ -50,9 +50,8 @@ export const DiscreteInput: React.FunctionComponent = () => {
 
   return (
     <>
-      <Text component={TextVariants.h3}>Slider value is: {initialValues.value1}</Text>
+      <Text component={TextVariants.h3}>Slider value is: {numValue}</Text>
       <Slider
-        name="value1"
         value={initialValues.value1}
         onChange={(value: number) => handleChange(value, 'value1')}
         customSteps={steps}

From 959be6f699744918264b61b0a8a94f61d9481a83 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 5 Jan 2023 09:59:49 -0500
Subject: [PATCH 4/4] fix lint/build errors

---
 .../components/Slider/examples/SliderActions.tsx   |  4 ++--
 .../components/Slider/examples/SliderDiscrete.tsx  | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-core/src/components/Slider/examples/SliderActions.tsx b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
index ec6e19efba6..5935eabf8bd 100644
--- a/packages/react-core/src/components/Slider/examples/SliderActions.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
@@ -53,8 +53,8 @@ export const SliderActions: React.FunctionComponent = () => {
   };
 
   const buildAction = (isDisabled: boolean) => (
-    <Button variant="plain" aria-label={isDisabled ? "Lock" : "Unlock"} onClick={() => setIsDisabled(!isDisabled)}>
-      <LockIcon />
+    <Button variant="plain" aria-label={isDisabled ? 'Lock' : 'Unlock'} onClick={() => setIsDisabled(!isDisabled)}>
+      {isDisabled ? <LockIcon /> : <LockOpenIcon />}
     </Button>
   );
 
diff --git a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
index d41db278f30..ac9347bd9b4 100644
--- a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
+++ b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
@@ -50,14 +50,14 @@ export const SliderDiscrete: React.FunctionComponent = () => {
 
   return (
     <>
-      <Text component={TextVariants.h3}>Slider value is: {numValue}</Text>
+      <Text component={TextVariants.h3}>Slider value is: {numValue.value1}</Text>
       <Slider
         value={initialValues.value1}
         onChange={(value: number) => handleChange(value, 'value1')}
         customSteps={steps}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {initialValues.value2}</Text>
+      <Text component={TextVariants.h3}>Slider value is: {numValue.value2}</Text>
       <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
       <Slider
         value={initialValues.value2}
@@ -67,7 +67,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         showTicks
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value3)}</Text>
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value3)}</Text>
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
       <Slider
         value={initialValues.value3}
@@ -79,7 +79,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         showBoundaries={false}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value4)}</Text>
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value4)}</Text>
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
       <Slider
         value={initialValues.value4}
@@ -90,7 +90,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         showTicks
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value5)}</Text>
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value5)}</Text>
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
       <Slider
         value={initialValues.value5}
@@ -100,7 +100,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         step={10}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value6)}</Text>
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value6)}</Text>
       <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
       <Slider
         value={initialValues.value6}
@@ -110,7 +110,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         onChange={(value: number) => handleChange(value, 'value6')}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(initialValues.value7)}</Text>
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value7)}</Text>
       <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
       <Slider
         value={initialValues.value7}