Add range slider label

coder0107git · coder0107git · commit ec2fe4bc2e13 · 2022-11-05T19:48:34.000-06:00
Added label to sliders on Editor -> IDE preferences (Word wrap limit, Tab size). Closes andrewbrg#14.
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());
+    });*/
+
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "version": "1.0.96",`
	`2`	`+ "version": "1.1.0",`
`3`	`3`	`"manifest_version": 2,`
`4`	`4`	`"minimum_chrome_version": "51",`
`5`	`5`	`"name": "Code Pad Text Editor",`