pips classes

README.md

@@ -16,7 +16,11 @@ An extensive documentation, including **examples**, **options** and **configurat
 
 Changelog
 ---------
-### 8.5.0 (latest)
+### 8.5.1 (latest)
+- Fix: class mixup in 8.5.0 merge
+- Change: position pips markers relatively
+
+### 8.5.0
 - Added: ability to completely override the classes used by the slider
 - Fix: removed invalid stopPropagation loop
 - Fix: source properly lints

distribute/nouislider.js

@@ -1,4 +1,4 @@
-/*! nouislider - 8.5.0 - 2016-04-24 14:53:53 */
+/*! nouislider - 8.5.1 - 2016-04-24 16:00:29 */
 
 (function (factory) {
 
@@ -760,7 +760,12 @@
 				markerNormal: 'marker-normal',
 				markerLarge: 'marker-large',
 				markerSub: 'marker-sub',
-				value: 'value'
+				value: 'value',
+				valueHorizontal: 'value-horizontal',
+				valueVertical: 'value-vertical',
+				valueNormal: 'value-normal',
+				valueLarge: 'value-large',
+				valueSub: 'value-sub'
 			}
 		};
 
@@ -1147,35 +1152,40 @@ function closure ( target, options, originalOptions ){
 
 	function addMarking ( spread, filterFunc, formatter ) {
 
-		var classPips, classMarker,
-			element = document.createElement('div'),
-			out = '';
+		var element = document.createElement('div'),
+			out = '',
+			valueSizeClasses = [
+				options.cssClasses.valueNormal,
+				options.cssClasses.valueLarge,
+				options.cssClasses.valueSub
+			],
+			markerSizeClasses = [
+				options.cssClasses.markerNormal,
+				options.cssClasses.markerLarge,
+				options.cssClasses.markerSub
+			],
+			valueOrientationClasses = [
+				options.cssClasses.valueHorizontal,
+				options.cssClasses.valueVertical
+			],
+			markerOrientationClasses = [
+				options.cssClasses.markerHorizontal,
+				options.cssClasses.markerVertical
+			];
 
 		addClass(element, options.cssClasses.pips);
+		addClass(element, options.ort === 0 ? options.cssClasses.pipsHorizontal : options.cssClasses.pipsVertical);
 
-		if ( options.ort === 0 ) {
-			classPips = options.cssClasses.pipsHorizontal;
-			classMarker = options.cssClasses.markerHorizontal;
-		} else {
-			classPips = options.cssClasses.pipsVertical;
-			classMarker = options.cssClasses.markerVertical;
-		}
-
-		addClass(element, classPips);
+		function getClasses( type, source ){
+			var a = source === options.cssClasses.value,
+				orientationClasses = a ? valueOrientationClasses : markerOrientationClasses,
+				sizeClasses = a ? valueSizeClasses : markerSizeClasses;
 
-		function getSizeClass( type ){
-			return [
-				options.cssClasses.markerNormal,
-				options.cssClasses.markerLarge,
-				options.cssClasses.markerSub
-			][type];
+			return source + ' ' + orientationClasses[options.ort] + ' ' + sizeClasses[type];
 		}
 
 		function getTags( offset, source, values ) {
-			return 'class="' + source + ' ' +
-				classMarker + ' ' +
-				getSizeClass(values[1]) +
-				'" style="' + options.style + ': ' + offset + '%"';
+			return 'class="' + getClasses(values[1], source) + '" style="' + options.style + ': ' + offset + '%"';
 		}
 
 		function addSpread ( offset, values ){
@@ -1192,14 +1202,15 @@ function closure ( target, options, originalOptions ){
 
 			// Values are only appended for points marked '1' or '2'.
 			if ( values[1] ) {
-				out += '<div '+getTags(offset, options.cssClasses.marker, values)+'>' + formatter.to(values[0]) + '</div>';
+				out += '<div ' + getTags(offset, options.cssClasses.value, values) + '>' + formatter.to(values[0]) + '</div>';
 			}
 		}
 
 		// Append all points.
 		Object.keys(spread).forEach(function(a){
 			addSpread(a, spread[a]);
 		});
+
 		element.innerHTML = out;
 
 		return element;

documentation/download.php

@@ -11,7 +11,7 @@
 
 		<p>noUiSlider is open source, and you can use it <strong>for free</strong> in any personal or commercial product. No attribution required. Both the uncompressed and compressed version of noUiSlider are available in a <code>.zip</code> release, which is hosted by Github and available over <code>https</code>.</p>
 
-		<a class="button" href="https://github.com/leongersen/noUiSlider/releases/download/8.5.0/noUiSlider.8.5.0.zip" data-category="convert" data-action="download">Download noUiSlider from Github</a>
+		<a class="button" href="https://github.com/leongersen/noUiSlider/releases/download/8.5.1/noUiSlider.8.5.1.zip" data-category="convert" data-action="download">Download noUiSlider from Github</a>
 
 		<div class="share">
 			<iframe src="https://ghbtns.com/github-btn.html?user=leongersen&repo=noUiSlider&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

documentation/pips.php

@@ -64,11 +64,11 @@
 
 		<h4 class="before-example">Vertical and vertical, bottom-to-top:</h4>
 
-		<div class="example vertical" style="float: left">
+		<div class="example vertical" style="width: 150px; float: left">
 			<div class="pips-range" id="pips-range-vertical"></div>
 		</div>
 
-		<div class="example vertical">
+		<div class="example vertical" style="width: 150px">
 			<div class="pips-range" id="pips-range-vertical-rtl"></div>
 		</div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nouislider",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "main": "distribute/nouislider",
   "style": "distribute/nouislider.min.css",
   "license": "WTFPL",

src/js/options.js

@@ -341,7 +341,12 @@
 				markerNormal: 'marker-normal',
 				markerLarge: 'marker-large',
 				markerSub: 'marker-sub',
-				value: 'value'
+				value: 'value',
+				valueHorizontal: 'value-horizontal',
+				valueVertical: 'value-vertical',
+				valueNormal: 'value-normal',
+				valueLarge: 'value-large',
+				valueSub: 'value-sub'
 			}
 		};
 

src/js/pips.js

@@ -162,35 +162,40 @@
 
 	function addMarking ( spread, filterFunc, formatter ) {
 
-		var classPips, classMarker,
-			element = document.createElement('div'),
-			out = '';
+		var element = document.createElement('div'),
+			out = '',
+			valueSizeClasses = [
+				options.cssClasses.valueNormal,
+				options.cssClasses.valueLarge,
+				options.cssClasses.valueSub
+			],
+			markerSizeClasses = [
+				options.cssClasses.markerNormal,
+				options.cssClasses.markerLarge,
+				options.cssClasses.markerSub
+			],
+			valueOrientationClasses = [
+				options.cssClasses.valueHorizontal,
+				options.cssClasses.valueVertical
+			],
+			markerOrientationClasses = [
+				options.cssClasses.markerHorizontal,
+				options.cssClasses.markerVertical
+			];
 
 		addClass(element, options.cssClasses.pips);
+		addClass(element, options.ort === 0 ? options.cssClasses.pipsHorizontal : options.cssClasses.pipsVertical);
 
-		if ( options.ort === 0 ) {
-			classPips = options.cssClasses.pipsHorizontal;
-			classMarker = options.cssClasses.markerHorizontal;
-		} else {
-			classPips = options.cssClasses.pipsVertical;
-			classMarker = options.cssClasses.markerVertical;
-		}
-
-		addClass(element, classPips);
+		function getClasses( type, source ){
+			var a = source === options.cssClasses.value,
+				orientationClasses = a ? valueOrientationClasses : markerOrientationClasses,
+				sizeClasses = a ? valueSizeClasses : markerSizeClasses;
 
-		function getSizeClass( type ){
-			return [
-				options.cssClasses.markerNormal,
-				options.cssClasses.markerLarge,
-				options.cssClasses.markerSub
-			][type];
+			return source + ' ' + orientationClasses[options.ort] + ' ' + sizeClasses[type];
 		}
 
 		function getTags( offset, source, values ) {
-			return 'class="' + source + ' ' +
-				classMarker + ' ' +
-				getSizeClass(values[1]) +
-				'" style="' + options.style + ': ' + offset + '%"';
+			return 'class="' + getClasses(values[1], source) + '" style="' + options.style + ': ' + offset + '%"';
 		}
 
 		function addSpread ( offset, values ){
@@ -207,14 +212,15 @@
 
 			// Values are only appended for points marked '1' or '2'.
 			if ( values[1] ) {
-				out += '<div '+getTags(offset, options.cssClasses.marker, values)+'>' + formatter.to(values[0]) + '</div>';
+				out += '<div ' + getTags(offset, options.cssClasses.value, values) + '>' + formatter.to(values[0]) + '</div>';
 			}
 		}
 
 		// Append all points.
 		Object.keys(spread).forEach(function(a){
 			addSpread(a, spread[a]);
 		});
+
 		element.innerHTML = out;
 
 		return element;

src/nouislider.pips.css

@@ -16,7 +16,6 @@
  *
  */
 .noUi-value {
-	width: 40px;
 	position: absolute;
 	text-align: center;
 }
@@ -44,17 +43,14 @@
  */
 .noUi-pips-horizontal {
 	padding: 10px 0;
-	height: 50px;
+	height: 80px;
 	top: 100%;
 	left: 0;
 	width: 100%;
 }
 .noUi-value-horizontal {
-	margin-left: -20px;
-	padding-top: 20px;
-}
-.noUi-value-horizontal.noUi-value-sub {
-	padding-top: 15px;
+	-webkit-transform: translate3d(-50%,50%,0);
+	transform: translate3d(-50%,50%,0);
 }
 
 .noUi-marker-horizontal.noUi-marker {
@@ -79,9 +75,9 @@
 	left: 100%;
 }
 .noUi-value-vertical {
-	width: 15px;
-	margin-left: 20px;
-	margin-top: -5px;
+	-webkit-transform: translate3d(0,-50%,0);
+	transform: translate3d(0,-50%,0);
+	padding-left: 25px;
 }
 
 .noUi-marker-vertical.noUi-marker {