Slider is more responsive

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 {

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 {