From 3e30df17fbc9a3a5efeb4c7bbf24ea62c828b235 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 20 May 2020 13:07:33 +0100
Subject: [PATCH] Slider is more responsive

---
 res/css/views/elements/_Slider.scss      |  5 ++++-
 src/components/views/elements/Slider.tsx | 11 ++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 06c3c4c98b..58ba2813b4 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -38,7 +38,9 @@ limitations under the License.
 
 .mx_Slider_bar > hr {
     width: 100%;
-    border: 0.2em solid $slider-background-color;
+    height: 0.4em;
+    background-color: $slider-background-color;
+    border: 0;
 }
 
 .mx_Slider_selection {
@@ -47,6 +49,7 @@ limitations under the License.
     width: calc(100% - 1em); // 2 * half the width of a dot
     height: 1em;
     position: absolute;
+    pointer-events: none;
 }
 
 .mx_Slider_selectionDot {
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index e181f0d9e3..f76a4684d3 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -93,7 +93,7 @@ export default class Slider extends React.Component<IProps> {
         return <div className="mx_Slider">
             <div>
                 <div className="mx_Slider_bar">
-                    <hr />
+                    <hr onClick={this.props.disabled ? () => {} : this.onClick.bind(this)}/>
                     { selection }
                 </div>
                 <div className="mx_Slider_dotContainer">
@@ -102,6 +102,15 @@ export default class Slider extends React.Component<IProps> {
             </div>
         </div>;
     }
+
+    onClick(event: React.MouseEvent) {
+        const width = (event.target as HTMLElement).clientWidth;
+        // nativeEvent is safe to use because https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX
+        // is supported by all modern browsers
+        const relativeClick = (event.nativeEvent.offsetX / width);
+        const nearestValue = this.props.values[Math.round(relativeClick * (this.props.values.length - 1))];
+        this.props.onSelectionChange(nearestValue);
+    }
 }
 
 interface IDotProps {