slider toggle working

package.json

@@ -40,6 +40,9 @@
     "file-loader": "^0.10.1",
     "html-webpack-plugin": "^2.28.0",
     "http-server": "^0.9.0",
+    "jquery": "^3.2.1",
+    "jquery-ui": "^1.12.1",
+    "jquery-ui-bundle": "^1.12.1",
     "karma": "^0.13.22",
     "karma-babel-preprocessor": "^6.0.1",
     "karma-chai": "^0.1.0",

src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/index.jsx

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './styles.scss';
-import Draggable from 'draggable';
+import $ from 'jquery';
+import 'jquery-ui-bundle';
+
 import _ from 'lodash';
 
 class SlideSelector extends Component {
@@ -13,6 +15,7 @@ class SlideSelector extends Component {
 		this.optionClass = this.optionClass.bind(this);
 		this.optionClass = this.optionClass.bind(this);
 		this.onDrag = this.onDrag.bind(this);
+		this.onDragStop = this.onDragStop.bind(this);
 
 		this.state = {
 			selected: this.props.default || 1
@@ -24,23 +27,36 @@ class SlideSelector extends Component {
 	}
 
 	initDraggable() {
-		var element = this.sliderBall;
-		var options = {
-			limit: this.slider,
-			grid: this.props.options.count,
-			onDrag: this.onDrag
-		};
-
-		new Draggable(element, options);
+		var $element = $(this.sliderBall);
+
+		$element.draggable({
+			axis: "y",
+			containment: "parent",
+			stop: this.onDragStop
+		})
+	}
+
+	onDragStop(event, { position: { left, top } }) {
+		//
+		// use this.slider.offsetTop to get difference in offset between
+		// slider options and sliderBall
+		//
+		const $sliderBall = $(event.target);
+		const $closest = $(this.getClosestOption(left, top + this.slider.offsetTop))
+		const closestY = $closest.position().top - this.slider.offsetTop;
+
+  	$sliderBall.stop().animate({
+      top: closestY
+  	}, 500,'easeOutCirc');
 	}
 
 	getClosestOption(x, y) {
-		const locations =  this.getOptionLocations();
+		const locations = this.getOptionLocations();
 		let closestIdx = 0;
 
 		locations.forEach((location, idx) => {
-			let diff = Math.abs(location - y);
-			let closestOptionDiff = locations[closestIdx] - y;
+			const diff = Math.abs(location - y);
+			const closestOptionDiff = Math.abs(locations[closestIdx] - y);
 
 			if(diff < closestOptionDiff){
 				closestIdx = idx;
@@ -51,7 +67,8 @@ class SlideSelector extends Component {
 	}
 
 	getOptionLocations() {
-		const optionsCount = this.props.options.count;
+		const optionsCount = Object.keys(this.props.options).length;
+
 		// returns the y offsets of all options
 		return _.times(optionsCount, i => this['option' + i].offsetTop);
 	}
@@ -72,7 +89,9 @@ class SlideSelector extends Component {
 
 	renderOption(optionId, idx) {
 		return (
-			<li className={this.optionClass(optionId)} key={idx} ref={ option => { this['option' + idx] = option }}>
+			<li className={'slide-option ' + this.optionClass(optionId)}
+					key={idx}
+					ref={ option => { this['option' + idx] = option }}>
 				{this.props.options[optionId]}
 			</li>
 		);

src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/styles.scss

@@ -2,14 +2,15 @@
 
 :local(.SlideSelector) {
 	display: flex;
+	position: relative;
 
 	.slider {
 		position: relative;
 		width: .76rem;
 		background: white;
 		border-radius: 10px;
 		margin-right: .5rem;
-		padding: 3px;
+		padding: 6px 3px;
 	}
 
 	.sliderBall {
@@ -19,6 +20,10 @@
 		background-color: $color-dark;
 	}
 
+	ul {
+		padding: 5px 0;
+	}
+
 	li {
 		margin-bottom: .5rem;
 

src/Main/Toolbox/Keyboard/Panel/KeyOverlay/index.jsx

@@ -7,8 +7,8 @@ import SlideSelector from './SlideSelector';
 class KeyOverlay extends Component {
 	sliderOptions() {
 		return {
-			1: 'boethian',
-			2: 'qwerty',
+			1: 'qwerty',
+			2: 'boethian',
 			3: 'none'
 		}
 	}