From ec2fe4bc2e13f1fda54ef448dd4f142fa80698e3 Mon Sep 17 00:00:00 2001
From: coder0107git <76132013+coder0107git@users.noreply.github.com>
Date: Sat, 5 Nov 2022 19:48:34 -0600
Subject: [PATCH 1/2] Add range slider label

Added label to sliders on Editor -> IDE preferences (Word wrap limit, Tab size). Closes #14.
---
 manifest.json                            |  2 +-
 src/css/main.css                         | 15 +++++++++++++++
 src/html/modals/editor/ide.settings.html | 18 +++++++++++++-----
 src/js/events.js                         | 18 +++++++++++++++++-
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/manifest.json b/manifest.json
index caebed7..e1a7a57 100644
--- 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
index fdd0100..221825e 100644
--- 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
index 6837c53..9f2da99 100644
--- a/src/html/modals/editor/ide.settings.html
+++ b/src/html/modals/editor/ide.settings.html
@@ -178,10 +178,11 @@
             <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"
@@ -189,7 +190,10 @@
                            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
index 2b80af1..b4f3172 100644
--- 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());
+    });*/
+
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 

From ddfb3e36263f63ca5e1c27afb04cae819c827add Mon Sep 17 00:00:00 2001
From: coder0107git <76132013+coder0107git@users.noreply.github.com>
Date: Sat, 5 Nov 2022 21:41:32 -0600
Subject: [PATCH 2/2] Remove unneeded comment in events.js

Removed an unnecessary comment I added and forgot to remove before I made my previous commit.
---
 src/js/events.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/js/events.js b/src/js/events.js
index b4f3172..3613c90 100644
--- a/src/js/events.js
+++ b/src/js/events.js
@@ -114,11 +114,6 @@ $(document).ready(function () {
         }
     });
 
-    /*$(document).on('input', '', function () {
-        var $this = $(this);
-        $this.next().val($this.val());
-    });*/
-
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////