diff --git a/public/dom.js b/public/dom.js
index d15de7d..47b60d2 100644
--- a/public/dom.js
+++ b/public/dom.js
@@ -1 +1,20 @@
 /* eslint-disable */
+var scales = document.querySelectorAll('input[type=range]')
+// we need to use an array of comments from the database - this one is for testing only
+const test = ['No pain', '', '', '', '4 means I take some pain medication', '', '', '', 'Can\'t focus on anything but my pain', '', ''];
+
+scales.forEach((scale) => {
+    scale.addEventListener('change', function () {
+        var currentScaleId = `${this.id}`; //e.g. gives scale-fatigue
+        var commentBoxId = `comment${currentScaleId.slice(currentScaleId.indexOf('-'))}`;
+        var scaleNumberId = `${this.id}-number`;
+        var scaleNumber = document.querySelector(`#${scaleNumberId}`);
+        var commentBox = document.querySelector(`#${commentBoxId}`);
+
+
+        scaleNumber.textContent = `${this.value}`;
+        commentBox.textContent = test[this.value] === '' ? "Any comments you've saved will appear here as you move the scale" : `Hint: ${test[this.value]}`
+    })
+})
+
+
diff --git a/src/controllers/addData.js b/src/controllers/addData.js
index e4b34ba..b67e721 100644
--- a/src/controllers/addData.js
+++ b/src/controllers/addData.js
@@ -1,4 +1,4 @@
-const symptomsList = [{ symptom: 'fatigue' }, { symptom: 'dry skin' }];
+const symptomsList = [{ symptom: 'fatigue' }, { symptom: 'headache' }];
 const factorsList = [{ factor: 'water' }, { factor: 'sleep' }];
 
 
diff --git a/src/views/addData.hbs b/src/views/addData.hbs
index a5d6148..1bcfea2 100644
--- a/src/views/addData.hbs
+++ b/src/views/addData.hbs
@@ -3,20 +3,26 @@
 <h2>Symptoms</h2>
 <ul>
   {{#each symptomsList}}
-  <span>
-    <li>{{this.symptom}}</li>
-    {{!-- need to add icon at the end --}}
-    <button class="expand">E</button>
-  </span>
-
+  <div id="symptom-rating">
+    <span>
+      <li>{{this.symptom}}</li>
+      {{!-- need to add icon at the end --}}
+      <button class="expand">E</button>
+    </span>
+    <br>
+    <input id="scale-{{this.symptom}}" type="range" min="0" max="10" value="0" steps="1">
+    <span id="scale-{{this.symptom}}-number"></span>
+    <p id="comment-{{this.symptom}}">Any comments you've saved will appear here as you move the scale</p>
+  </div>
   {{/each}}
 </ul>
 
+
 <h2>Factors</h2>
 
 <ul>
   {{#each factorsList}}
-  <span>
+  <span id="factors-rating">
     <li>{{this.factor}}</li>
     {{!-- need to add icon at the end --}}
     <button class="expand">E</button>