added basic range and basic inverted range variations.

src/definitions/modules/range.less

@@ -10,6 +10,8 @@
 .ui.range {
 	width: 100%;
 	height: @height;
+  margin-top: @margin;
+  margin-bottom: @margin;
 }
 
 .ui.range .inner {
@@ -92,7 +94,7 @@
 ---------------*/
 
 .ui.inverted.range .inner .track-fill {
-	background-color: @lightBlack;
+	background-color: @invertedTrackFillColor;
 }
 
 .ui.inverted.range .inner .track {
@@ -207,6 +209,238 @@
 	background-color: @lightBlack;
 }
 
+/*--------------
+     Basic
+---------------*/
+
+/* Standard */
+.ui.range.basic .inner .thumb {
+	background-color: @trackFillColor;
+}
+.ui.range.basic .inner .thumb:hover {
+	background-color: @trackFillColorFocus;
+}
+
+/* Red */
+.ui.red.range.basic .inner .thumb {
+	background-color: @red;
+}
+.ui.red.range.basic .inner .thumb:hover {
+	background-color: @redHover;
+}
+
+/* Orange */
+.ui.orange.range.basic .inner .thumb {
+	background-color: @orange;
+}
+.ui.orange.range.basic .inner .thumb:hover {
+	background-color: @orangeHover;
+}
+
+/* Yellow */
+.ui.yellow.range.basic .inner .thumb {
+	background-color: @yellow;
+}
+.ui.yellow.range.basic .inner .thumb:hover {
+	background-color: @yellowHover;
+}
+
+/* Olive */
+.ui.olive.range.basic .inner .thumb {
+	background-color: @olive;
+}
+.ui.olive.range.basic .inner .thumb:hover {
+	background-color: @oliveHover;
+}
+
+/* Green */
+.ui.green.range.basic .inner .thumb {
+	background-color: @green;
+}
+.ui.green.range.basic .inner .thumb:hover {
+	background-color: @greenHover;
+}
+
+/* Teal */
+.ui.teal.range.basic .inner .thumb {
+	background-color: @teal;
+}
+.ui.teal.range.basic .inner .thumb:hover {
+	background-color: @tealHover;
+}
+
+/* Blue */
+.ui.blue.range.basic .inner .thumb {
+	background-color: @blue;
+}
+.ui.blue.range.basic .inner .thumb:hover {
+	background-color: @blueHover;
+}
+
+/* Violet */
+.ui.violet.range.basic .inner .thumb {
+	background-color: @violet;
+}
+.ui.violet.range.basic .inner .thumb:hover {
+	background-color: @violetHover;
+}
+
+/* Purple */
+.ui.purple.range.basic .inner .thumb {
+	background-color: @purple;
+}
+.ui.purple.range.basic .inner .thumb:hover {
+	background-color: @purpleHover;
+}
+
+/* Pink */
+.ui.pink.range.basic .inner .thumb {
+	background-color: @pink;
+}
+.ui.pink.range.basic .inner .thumb:hover {
+	background-color: @pinkHover;
+}
+
+/* Brown */
+.ui.brown.range.basic .inner .thumb {
+	background-color: @brown;
+}
+.ui.brown.range.basic .inner .thumb:hover {
+	background-color: @brownHover;
+}
+
+/* Grey */
+.ui.grey.range.basic .inner .thumb {
+	background-color: @grey;
+}
+.ui.grey.range.basic .inner .thumb:hover {
+	background-color: @greyHover;
+}
+
+/* Black */
+.ui.black.range.basic .inner .thumb {
+	background-color: @black;
+}
+.ui.black.range.basic .inner .thumb:hover {
+	background-color: @blackHover;
+}
+
+/*--------------
+  Basic Inverted
+---------------*/
+
+/* Standard */
+.ui.inverted.range.basic .inner .thumb {
+	background-color: @invertedTrackFillColor;
+}
+.ui.inverted.range.basic .inner .thumb:hover {
+	background-color: @invertedTrackFillColorFocus;
+}
+
+/* Red */
+.ui.red.inverted.range.basic .inner .thumb {
+	background-color: @lightRed;
+}
+.ui.red.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightRedHover;
+}
+
+/* Orange */
+.ui.orange.inverted.range.basic .inner .thumb {
+	background-color: @lightOrange;
+}
+.ui.orange.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightOrangeHover;
+}
+
+/* Yellow */
+.ui.yellow.inverted.range.basic .inner .thumb {
+	background-color: @lightYellow;
+}
+.ui.yellow.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightYellowHover;
+}
+
+/* Olive */
+.ui.olive.inverted.range.basic .inner .thumb {
+	background-color: @lightOlive;
+}
+.ui.olive.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightOliveHover;
+}
+
+/* Green */
+.ui.green.inverted.range.basic .inner .thumb {
+	background-color: @lightGreen;
+}
+.ui.green.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightGreenHover;
+}
+
+/* Teal */
+.ui.teal.inverted.range.basic .inner .thumb {
+	background-color: @lightTeal;
+}
+.ui.teal.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightTealHover;
+}
+
+/* Blue */
+.ui.blue.inverted.range.basic .inner .thumb {
+	background-color: @lightBlue;
+}
+.ui.blue.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightBlueHover;
+}
+
+/* Violet */
+.ui.violet.inverted.range.basic .inner .thumb {
+	background-color: @lightViolet;
+}
+.ui.violet.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightVioletHover;
+}
+
+/* Purple */
+.ui.purple.inverted.range.basic .inner .thumb {
+	background-color: @lightPurple;
+}
+.ui.purple.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightPurpleHover;
+}
+
+/* Pink */
+.ui.pink.inverted.range.basic .inner .thumb {
+	background-color: @lightPink;
+}
+.ui.pink.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightPinkHover;
+}
+
+/* Brown */
+.ui.brown.inverted.range.basic .inner .thumb {
+	background-color: @lightBrown;
+}
+.ui.brown.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightBrownHover;
+}
+
+/* Grey */
+.ui.grey.inverted.range.basic .inner .thumb {
+	background-color: @lightGrey;
+}
+.ui.grey.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightGreyHover;
+}
+
+/* Black */
+.ui.black.inverted.range.basic .inner .thumb {
+	background-color: @lightBlack;
+}
+.ui.black.inverted.range.basic .inner .thumb:hover {
+	background-color: @lightBlackHover;
+}
+
 /*--------------
      Sizing
 ---------------*/

src/themes/default/modules/range.variables

@@ -8,6 +8,7 @@
 
 @height        : 1.5em;
 @hoverPointer  : auto;
+@margin        : 1em;
 
 /* Track */
 @trackHeight        : .4em;
@@ -17,9 +18,12 @@
 @trackColor         : @transparentBlack;
 
 /* Track Fill */
-@trackFillHeight        : @trackHeight;
-@trackFillColor         : @black;
-@trackFillBorderRadius  : @trackBorderRadius;
+@trackFillHeight             : @trackHeight;
+@trackFillColor              : @black;
+@trackFillColorFocus         : @blackHover;
+@invertedTrackFillColor      : @lightBlack;
+@invertedTrackFillColorFocus : @lightBlackHover;
+@trackFillBorderRadius       : @trackBorderRadius;
 
 /* Thumb */
 @thumbHeight              : @height;