- No support for vertical orientation.
- No support for two handles.
- The nonLinearBase-option is optional and defaults to 5.
+---
+
+## Non-linear value translation
+
+Sometimes not every value is of equal importance. In the example below, the slider focusses on the higher numbers by adding a `log`-type position value funtion.
+Alternatively there is also a `pow`-type position value function available, making the reverse possible.
+
+```html_example
+<div class="small-10 columns">
+<div class="slider" data-slider data-initial-start="50" data-step="1" data-position-value-function="log" data-non-linear-base="5">
+ <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutputNonLinear"></span>
+</div>
+</div>
+<div class="small-2 columns">
+ <input type="number" id="sliderOutputNonLinear">
+</div>
+</div>
+```
+
++The nonLinearBase-option is optional and defaults to 5.
++
+ ## Reflow
+
+ The slider takes into account the width of the handles when calculating how to display itself. This means that if the slider is initially hidden, or hidden while the value is adjusted, the resulting visual will be slightly different because the width of the handle is indeterminate. If this is problematic, you can use JavaScript to cause the slider to reflow at the time that you change it from being hidden. Example:
+
+ ```js
+ $('#my-slider').show();
+ $('#my-slider').foundation('_reflow');
+ ```
}
}
+ _reflow() {
+ this.setHandles();
+ }
+ /**
+ * @function
+ * @private
+ * @param {Number} value - floating point (the value) to be transformed using to a relative position on the slider (the inverse of _value)
+ */
+ _pctOfBar(value) {
+ var pctOfBar = percent(value - this.options.start, this.options.end - this.options.start)
+
+ switch(this.options.positionValueFunction) {
+ case "pow":
+ pctOfBar = this._logTransform(pctOfBar);
+ break;
+ case "log":
+ pctOfBar = this._powTransform(pctOfBar);
+ break;
+ }
+
+ return pctOfBar.toFixed(2)
+ }
+
+ /**
+ * @function
+ * @private
+ * @param {Number} pctOfBar - floating point, the relative position of the slider (typically between 0-1) to be transformed to a value
+ */
+ _value(pctOfBar) {
+ switch(this.options.positionValueFunction) {
+ case "pow":
+ pctOfBar = this._powTransform(pctOfBar);
+ break;
+ case "log":
+ pctOfBar = this._logTransform(pctOfBar);
+ break;
+ }
+ var value = (this.options.end - this.options.start) * pctOfBar + this.options.start;
+
+ return value
+ }
+
+ /**
+ * @function
+ * @private
+ * @param {Number} value - floating point (typically between 0-1) to be transformed using the log function
+ */
+ _logTransform(value) {
+ return baseLog(this.options.nonLinearBase, ((value*(this.options.nonLinearBase-1))+1))
+ }
+
+ /**
+ * @function
+ * @private
+ * @param {Number} value - floating point (typically between 0-1) to be transformed using the power function
+ */
+ _powTransform(value) {
+ return (Math.pow(this.options.nonLinearBase, value) - 1) / (this.options.nonLinearBase - 1)
+ }
+
/**
* Sets the position of the selected handle and fill bar.
* @function