From 992e2c1edbf5ffdb92f50aa59709c6513b8393aa Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Fri, 22 Jan 2021 12:37:28 -0500
Subject: [PATCH] updated slider to update on click

---
 .../react-core/src/components/Slider/Slider.tsx | 17 +++++++++++++++--
 .../_tests_/__snapshots__/Slider.test.tsx.snap  |  5 +++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx
index aaa33a911c4..95b8f593193 100644
--- a/packages/react-core/src/components/Slider/Slider.tsx
+++ b/packages/react-core/src/components/Slider/Slider.tsx
@@ -106,6 +106,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     thumbRef.current.focus();
   };
 
+  
+
   const onBlur = () => {
     if (onChange) {
       onChange(localInputValue);
@@ -144,7 +146,18 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     document.addEventListener('mouseup', callbackMouseUp);
   };
 
-  const handleMousemove = (e: MouseEvent) => {
+  const onSliderRailClick = (e: any) => {
+    handleMousemove(e);
+    if (snapValue && isDiscrete && steps) {
+      thumbRef.current.style.setProperty('--pf-c-slider--value', `${snapValue}%`);
+      setValue(snapValue);
+      if (onValueChange) {
+        onValueChange(snapValue);
+      }
+    }
+  };
+
+  const handleMousemove = (e: any) => {
     let newPosition = e.clientX - diff - sliderRailRef.current.getBoundingClientRect().left;
 
     const end = sliderRailRef.current.offsetWidth - thumbRef.current.offsetWidth;
@@ -241,7 +254,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     <div className={css(styles.slider, className)} style={style} {...props}>
       {leftActions && <div className={css(styles.sliderActions)}>{leftActions}</div>}
       <div className={css(styles.sliderMain)}>
-        <div className={css(styles.sliderRail)} ref={sliderRailRef}>
+        <div className={css(styles.sliderRail)} ref={sliderRailRef} onClick={onSliderRailClick}>
           <div className={css(styles.sliderRailTrack)} />
         </div>
         {steps && (
diff --git a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
index bd149d750fb..a82f790fe1d 100644
--- a/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
+++ b/packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`slider renders continuous slider 1`] = `
     >
       <div
         className="pf-c-slider__rail"
+        onClick={[Function]}
       >
         <div
           className="pf-c-slider__rail-track"
@@ -104,6 +105,7 @@ exports[`slider renders discrete slider 1`] = `
     >
       <div
         className="pf-c-slider__rail"
+        onClick={[Function]}
       >
         <div
           className="pf-c-slider__rail-track"
@@ -265,6 +267,7 @@ exports[`slider renders slider with input 1`] = `
     >
       <div
         className="pf-c-slider__rail"
+        onClick={[Function]}
       >
         <div
           className="pf-c-slider__rail-track"
@@ -332,6 +335,7 @@ exports[`slider renders slider with input above thumb 1`] = `
     >
       <div
         className="pf-c-slider__rail"
+        onClick={[Function]}
       >
         <div
           className="pf-c-slider__rail-track"
@@ -431,6 +435,7 @@ exports[`slider renders slider with input actions 1`] = `
     >
       <div
         className="pf-c-slider__rail"
+        onClick={[Function]}
       >
         <div
           className="pf-c-slider__rail-track"