Add InvertedRangeSlider

ui/src/main/java/edu/wpi/grip/ui/pipeline/input/RangeInputSocketController.java

@@ -11,10 +11,12 @@
 import org.controlsfx.control.RangeSlider;
 
 import java.util.List;
-
+import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.SimpleBooleanProperty;
 import javafx.fxml.FXML;
 import javafx.geometry.Pos;
 import javafx.scene.control.Label;
+import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.VBox;
 
 import static com.google.common.base.Preconditions.checkArgument;
@@ -26,6 +28,10 @@
 public class RangeInputSocketController extends InputSocketController<List<Number>> {
 
   private final RangeSlider slider;
+  private final BooleanProperty inverted = new SimpleBooleanProperty(false);
+
+  private static final String INVERTED_CSS
+      = RangeInputSocketController.class.getResource("InvertedRangeSlider.css").toExternalForm();
 
   /**
    * @param socket An <code>InputSocket</code> with a domain containing two <code>Number</code>s
@@ -76,6 +82,20 @@ public class RangeInputSocketController extends InputSocketController<List<Numbe
       range.set(1, slider.getHighValue());
       socket.setValue(range);
     });
+
+    this.slider.addEventHandler(MouseEvent.MOUSE_CLICKED, event -> {
+      if (event.getClickCount() == 2) {
+        inverted.set(!inverted.get());
+      }
+    });
+
+    this.inverted.addListener((observable, oldValue, newValue) -> {
+      if (newValue) {
+        this.slider.getStylesheets().add(INVERTED_CSS);
+      } else {
+       this.slider.getStylesheets().removeAll(INVERTED_CSS); // removeAll has no exceptions!
+      }
+    });
   }
 
   @FXML

ui/src/main/resources/edu/wpi/grip/ui/pipeline/input/InvertedRangeSlider.css

@@ -0,0 +1,18 @@
+.range-slider .range-bar {
+    -fx-background-color:
+          -fx-shadow-highlight-color,
+          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
+          linear-gradient(to bottom,
+            derive(-fx-control-inner-background, -9%),
+            derive(-fx-control-inner-background, 0%),
+            derive(-fx-control-inner-background, -5%),
+            derive(-fx-control-inner-background, -12%)
+          );
+}
+
+.range-slider .track {
+    -fx-background-color: -fx-focus-color;
+    -fx-background-insets: 0 0 -1 0, 0, 1;
+    -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
+    -fx-padding: 0.25em; /* 3 */
+}