Font Setting - Added draggable slider

res/css/views/elements/_Slider.pcss

@@ -61,13 +61,27 @@ limitations under the License.
     z-index: 10;
 }
 
+.mx_Slider_selectionDotInner {
+  position: absolute;
+  width: 100%;
+  height: 100%;  
+  border-radius: 50%;
+  /* background-color: white; */
+  background-color: $accent;  
+  z-index: 10;
+  pointer-events: all;
+}
+
 .mx_Slider_selectionText {
     color: $muted-fg-color;
     font-size: $font-14px;
     position: relative;
     text-align: center;
     top: 30px;
     width: 100%;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
 }
 
 .mx_Slider_selection > hr {

src/components/views/elements/Slider.tsx

@@ -35,6 +35,12 @@ interface IProps {
 }
 
 export default class Slider extends React.Component<IProps> {
+    // state to keep track of the current index and percent
+    state = {
+        index: this.props.values.indexOf(this.props.value),
+        percent: this.offset(this.props.values, this.props.value),
+    };
+
     // offset is a terrible inverse approximation.
     // if the values represents some function f(x) = y where x is the
     // index of the array and y = values[x] then offset(f, y) = x
@@ -83,11 +89,60 @@ export default class Slider extends React.Component<IProps> {
 
         let selection = null;
 
+        const onDrag = (e: React.DragEvent) => {
+
+            const target = e.target as HTMLElement;
+            if (!target.parentNode) return null;
+            const parent = target.parentNode as HTMLElement;
+            if (!parent.parentNode) return null;
+            const slider = parent.parentNode as HTMLElement;
+            const rect = slider.getBoundingClientRect();
+
+            const x = e.clientX - rect.left; //x position within the element.
+            const width = rect.width;
+            const percent = x / width;
+            const value = Math.round(percent * (this.props.values.length - 1));
+            this.setState({ index: value, percent: percent * 100 });
+
+            //put the inner dot to the correct position
+            const innerDot = target.parentNode as any;
+            if (!innerDot) return null;
+            const offset = this.offset(this.props.values, this.props.values[value]);
+            innerDot.style.left = `calc(-1.195em + " + ${offset} + "%)`;
+
+        };
+
+        const onDragEnd = (e: any) => {
+            const innerDot = e.target.parentNode;
+            const target = e.target as HTMLElement;
+            if (!target.parentNode) return null;
+            const parent = target.parentNode as HTMLElement;
+            if (!parent.parentNode) return null;
+            const slider = parent.parentNode as HTMLElement;
+            const rect = slider.getBoundingClientRect();
+            const x = e.clientX - rect.left; //x position within the element.
+            // console.log(x);
+            if(x < -10 || x > rect.width + 10)  return null;
+            const width = rect.width;
+
+            const percent = x / width;
+            const value = Math.round(percent * (this.props.values.length - 1));
+            const offset = this.offset(this.props.values, this.props.values[value]);
+            innerDot.style.left = `calc(-1.195em + " + ${offset} + "%)`;
+            this.props.onSelectionChange(this.props.values[value]);
+        };
+
         if (!this.props.disabled) {
             const offset = this.offset(this.props.values, this.props.value);
             selection = (
                 <div className="mx_Slider_selection">
                     <div className="mx_Slider_selectionDot" style={{ left: "calc(-1.195em + " + offset + "%)" }}>
+                        <div
+                            onDrag={onDrag}
+                            onDragEnd={onDragEnd}
+                            draggable={true}
+                            className="mx_Slider_selectionDotInner"
+                        ></div>
                         <div className="mx_Slider_selectionText">{this.props.value}</div>
                     </div>
                     <hr style={{ width: offset + "%" }} />