diff --git a/packages/react-core/src/components/Slider/examples/Slider.md b/packages/react-core/src/components/Slider/examples/Slider.md
index d99a2c82038..073228291a7 100644
--- a/packages/react-core/src/components/Slider/examples/Slider.md
+++ b/packages/react-core/src/components/Slider/examples/Slider.md
@@ -15,604 +15,30 @@ 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
 
-```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..5935eabf8bd
--- /dev/null
+++ b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
@@ -0,0 +1,91 @@
+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 buildAction = (isDisabled: boolean) => (
+    <Button variant="plain" aria-label={isDisabled ? 'Lock' : 'Unlock'} onClick={() => setIsDisabled(!isDisabled)}>
+      {isDisabled ? <LockIcon /> : <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={buildAction(isDisabled)}
+      />
+    </>
+  );
+};
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..da1a370a46a
--- /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 SliderContinuous: 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..4f30a720d02
--- /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 SliderDisabled: 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
new file mode 100644
index 00000000000..ac9347bd9b4
--- /dev/null
+++ b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderDiscrete: 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, name: string) => {
+    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: {numValue.value1}</Text>
+      <Slider
+        value={initialValues.value1}
+        onChange={(value: number) => handleChange(value, 'value1')}
+        customSteps={steps}
+      />
+      <br />
+      <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}
+        onChange={(value: number) => handleChange(value, 'value2')}
+        max={200}
+        step={50}
+        showTicks
+      />
+      <br />
+      <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}
+        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(numValue.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(numValue.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(numValue.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(numValue.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 />
+    </>
+  );
+};
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}
+      />
+    </>
+  );
+};