- support unit option

 - bump version

Author: zbryikt

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## v3.1.0
+
+ - support `unit` option
+
+
 ## v3.0.6
 
  - tweak ui layout by increasing height with 2px

README.md

@@ -70,6 +70,7 @@ You can use an optional `data-class` attribute in `input` to define the classes
    - `label.min` - text for showing in minimal value label
    - `label.max` - text for showing in maximal value label
    - `label.ptr(v)` - function that convert v ( value ) to the returned customized string that representing v.
+ * `unit`: unit for showing in label
 
 
 ## Decorating Classes

dist/index.js

@@ -97,7 +97,7 @@
         ref$ = !mouse.alt
           ? [this$.el.h.p, this$.val.from]
           : [this$.el.h.q, this$.val.to], p = ref$[0], v = ref$[1];
-        return p.innerText = this$.label.ptr(Math.round(10000 * v) / 10000);
+        return p.innerText = this$.label.ptr(Math.round(10000 * v) / 10000) + (this$.opt.unit || '');
       },
       prepare: function(e){
         mouse.alt = e.target && e.target.classList && e.target.classList.contains('alt') ? true : false;
@@ -198,14 +198,14 @@
           }
         }
       }, this.opt.label || {});
-      this.el.h.l.innerText = this.label.min != null
+      this.el.h.l.innerText = (this.label.min != null
         ? this.label.min
-        : this.opt.min;
-      this.el.h.r.innerText = this.label.max != null
+        : this.opt.min) + (this.opt.unit || '');
+      this.el.h.r.innerText = (this.label.max != null
         ? this.label.max
-        : this.opt.max;
-      this.el.h.p.innerText = this.label.ptr(this.opt.from);
-      this.el.h.q.innerText = this.label.ptr(this.opt.to);
+        : this.opt.max) + (this.opt.unit || '');
+      this.el.h.p.innerText = this.label.ptr(this.opt.from) + (this.opt.unit || '');
+      this.el.h.q.innerText = this.label.ptr(this.opt.to) + (this.opt.unit || '');
       this.root.classList[this.opt.limitMax != null ? 'add' : 'remove']('limit');
       this.range = this.opt.range != null
         ? this.opt.range
@@ -317,7 +317,7 @@
         : Math.max(xs.from, xs.to) - left + 0.5;
       /* update value and position into view */
       hbox = elH.getBoundingClientRect();
-      elH.innerText = this.label.ptr(Math.round(10000 * v) / 10000);
+      elH.innerText = this.label.ptr(Math.round(10000 * v) / 10000) + (this.opt.unit || '');
       elH.style.left = 100 * (0.01 * x * rbox.width) / rbox.width + "%";
       elH.style.transform = "translate(-50%,0)";
       elL.style.left = x + "%";

dist/index.min.js

@@ -3,7 +3,7 @@
   "name": "ldslider",
   "license": "MIT",
   "description": "Slider Library in Vanilla JS",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "style": "dist/index.min.css",
   "browser": "dist/index.min.js",
   "main": "dist/index.min.js",

package-lock.json

@@ -70,7 +70,7 @@ ldslider = (opt={}) ->
       document.removeEventListener \mouseup, mouse.up
       document.removeEventListener \mousemove, mouse.move
       [p,v] = if !mouse.alt => [@el.h.p, @val.from] else [@el.h.q, @val.to]
-      p.innerText = @label.ptr(Math.round(10000 * v) / 10000)
+      p.innerText = @label.ptr(Math.round(10000 * v) / 10000) + (@opt.unit or '')
     prepare: (e) ~>
       mouse.alt = if e.target and e.target.classList and e.target.classList.contains \alt => true
       else false
@@ -120,10 +120,10 @@ ldslider.prototype = Object.create(Object.prototype) <<< do
         else if it == @opt.max and @label.max? => @label.max
         else it
     } <<< (@opt.label or {})
-    @el.h.l.innerText = if @label.min? => @label.min else @opt.min
-    @el.h.r.innerText = if @label.max? => @label.max else @opt.max
-    @el.h.p.innerText = @label.ptr(@opt.from)
-    @el.h.q.innerText = @label.ptr(@opt.to)
+    @el.h.l.innerText = (if @label.min? => @label.min else @opt.min) + (@opt.unit or '')
+    @el.h.r.innerText = (if @label.max? => @label.max else @opt.max) + (@opt.unit or '')
+    @el.h.p.innerText = @label.ptr(@opt.from) + (@opt.unit or '')
+    @el.h.q.innerText = @label.ptr(@opt.to) + (@opt.unit or '')
     @root.classList[if @opt.limit-max? => \add else \remove] \limit
     @range = if (@opt.range?) => @opt.range else if @root.classList.contains(\range) => true else false
     if @range => @root.classList.toggle \range, @range
@@ -185,7 +185,7 @@ ldslider.prototype = Object.create(Object.prototype) <<< do
 
     /* update value and position into view */
     hbox = el-h.getBoundingClientRect!
-    el-h.innerText = @label.ptr(Math.round(10000 * v) / 10000)
+    el-h.innerText = @label.ptr(Math.round(10000 * v) / 10000) + (@opt.unit or '')
     el-h.style.left = "#{100 * (0.01 * x * rbox.width) / rbox.width}%"
     el-h.style.transform = "translate(-50%,0)"
     el-l.style.left = "#x%"