updated slider to update on click

patternfly · Jan 22, 2021 · 992e2c1 · 992e2c1
1 parent ae6e238
commit 992e2c1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git 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
@@ -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"