Add range slider label

Added label to sliders on Editor -> IDE preferences (Word wrap limit, Tab size). Closes andrewbrg#14.
coder0107git · Nov 6, 2022 · ec2fe4b · ec2fe4b
1 parent 8150276
commit ec2fe4b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.96",
+  "version": "1.1.0",
   "manifest_version": 2,
   "minimum_chrome_version": "51",
   "name": "Code Pad Text Editor",

diff --git a/src/css/main.css b/src/css/main.css
@@ -606,3 +606,18 @@ input.cmn-tgl-rnd-flt:checked + label:after {
 .bootstrapMenu .dropdown-item .fa {
     font-size: 0.9rem;
 }
+
+/*******************************************************************************/
+/******************************** Range Slider Fix *****************************/
+/*******************************************************************************/
+.range-slider {
+    white-space: nowrap;
+}
+
+.range-slider > * {
+    display: inline-block;
+}
+
+.range-slider-range {
+    width: 95.5%;
+}
diff --git a/src/html/modals/editor/ide.settings.html b/src/html/modals/editor/ide.settings.html
@@ -178,18 +178,22 @@
             <div class="form-group">
                 <label>
                     <strong>Tab size</strong><br/>
-                    <span>#No. of columns per tab</span>
+                    <span>Number of columns per tab</span>
                 </label>
                 <div class="range-slider">
-                    <input data-toggle="tooltip"
+                    <input id="tabSize"
+                           data-toggle="tooltip"
                            data-action="ide-setting"
                            data-option="tabSize"
                            class="range-slider-range"
                            type="range"
                            min="1"
                            max="8"
                            step="1"
-                           title="Tab size"/>
+                           title="Tab size"/> 
+
+                    <label for="tabSize"
+                           title="Default: 4, Current: 4">4</label>
                 </div>
             </div>
         </div>
@@ -198,10 +202,11 @@
             <div class="form-group">
                 <label>
                     <strong>Word wrap limit</strong><br/>
-                    <span>#No. of characters per line before wrapping</span>
+                    <span>Number of characters per line before wrapping</span>
                 </label>
                 <div class="range-slider">
-                    <input data-toggle="tooltip"
+                    <input id="wrap"
+                           data-toggle="tooltip"
                            data-action="ide-setting"
                            data-option="wrap"
                            class="range-slider-range"
@@ -210,6 +215,9 @@
                            max="128"
                            step="1"
                            title="Word wrap limit"/>
+
+                    <label for="wrap"
+                           title="Default: 68, Current: 68">68</label>
                 </div>
             </div>
         </div>

diff --git a/src/js/events.js b/src/js/events.js
@@ -100,9 +100,25 @@ $(document).ready(function () {
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
     $(document).on('input change', '[data-action="ide-setting"]', function () {
-        IdeSettings.persistAndApply(IdeSettings.getKeyValFromEl($(this)));
+        let $this = $(this);
+        let $next = $(this).next();
+
+        IdeSettings.persistAndApply(IdeSettings.getKeyValFromEl($this));
+
+        if ($this.hasClass('range-slider-range')) {
+            $next.text($this.val());
+
+            let title = $next.attr('title').split(', ');
+            title[1] = 'Current: ' + $this.val();
+            $next.attr('title', title.join(', '));
+        }
     });
 
+    /*$(document).on('input', '', function () {
+        var $this = $(this);
+        $this.next().val($this.val());
+    });*/
+
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////