Do not fire callback on change

Author: OrderAndCh4oS

example/plot.js example/example.jsexample/plot.js renamed to example/example.js

@@ -2,35 +2,31 @@ const logValueInput = document.getElementById('log-value-input');
 const logScaleInput = document.getElementById('log-scale-input');
 const linearValueInput = document.getElementById('linear-scale-input');
 
-const handleDemoLogUpdate = (log, value) => {
-    logValueInput.value = log.toFixed(3);
-    logScaleInput.value = value;
-};
-
 const demoLog = new LogSlider({
     id: 'log-scale',
-    callback: handleDemoLogUpdate,
-});
-
-const handleDemoLinearUpdate = (value) => {
-    linearValueInput.value = value;
-};
-
-const demoLinear = new LogSlider({
-    id: 'linear-scale',
-    callback: handleDemoLinearUpdate,
+    callback: (log, value) => {
+        logValueInput.value = log.toFixed(2);
+        logScaleInput.value = value;
+    },
 });
 
 logScaleInput.value = demoLog.inputValue;
 logScaleInput.addEventListener('change', function() {
     demoLog.inputValue = Number(this.value);
 });
 
-logValueInput.value = demoLog.value.toFixed(3);
+logValueInput.value = demoLog.value.toFixed(2);
 logValueInput.addEventListener('change', function() {
     demoLog.value = Number(this.value);
 });
 
+const demoLinear = new LogSlider({
+    id: 'linear-scale',
+    callback: (value, inputValue) => {
+        linearValueInput.value = value;
+    },
+});
+
 linearValueInput.value = demoLinear.inputValue;
 linearValueInput.addEventListener('change', function() {
     demoLinear.inputValue = Number(this.value);

example/index.html

@@ -30,7 +30,7 @@
                 </div>
                 <div class="form-field">
                     <label for="log-value-input">Log Value</label>
-                    <input type="number" id="log-value-input" min="100" max="10000"/>
+                    <input type="number" id="log-value-input" min="0.01" max="100" step="0.01"/>
                 </div>
             </div>
             <div class="col-6 column">
@@ -48,12 +48,9 @@
                 </div>
                 <div class="form-field">
                     <label for="linear-scale-input">Value</label>
-                    <input type="number" id="linear-scale-input" step="1" min="1" max="1000"/>
+                    <input type="number" id="linear-scale-input" step="0.1" min="0.1" max="10"/>
                 </div>
             </div>
-            <div class="col-12 column">
-                <div id="plot"></div>
-            </div>
         </div>
     </div>
 </div>
@@ -64,6 +61,6 @@
 </div>
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <script src="log-slider.js"></script>
-<script src="plot.js"></script>
+<script src="example.js"></script>
 </body>
 </html>

example/log-slider.js

@@ -1,6 +1,6 @@
 {
   "name": "@orderandchaos/log-slider",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Wrapper class for initialising range slider with optional log scaling. ",
   "main": "lib/log-slider.js",
   "source": "src/slider.js",

example/log-slider.js.map

@@ -191,7 +191,6 @@ class LogSlider {
     _handleChangeEvent() {
         this._snapToStep();
         this._updateTab();
-        this._callback(this._result, this._input.value);
     }
 
     _snapToStep() {