Fixing issue #111 on bumpy slider (#112)

Fixing bumpy ranges and sliders on issue #111 

I encapsulated the i tag inside an inline-block span with a larger
width, and then right-align the i, to keep the same look as the initial
one, just without the bump.

apps/jscad-web/static/main.css

@@ -491,14 +491,24 @@ p {
 #paramsDiv .form-line i {
   display: none;
 }
+#paramsDiv .form-line[type="range"] .i-locker,
+#paramsDiv .form-line[type="slider"] .i-locker {
+  display: inline-block;
+  width: 60px;
+  text-align: right;
+}
 #paramsDiv .form-line[type="color"] i,
 #paramsDiv .form-line[type="range"] i,
 #paramsDiv .form-line[type="slider"] i {
-  display: inline-block;
+  display: inline;
   padding: 0 5px;
   margin-left: 5px;
   border: solid 1px #eee;
 }
+#paramsDiv .form-line[type="range"] input,
+#paramsDiv .form-line[type="slider"] input {
+  padding: 2px 0;
+}
 .dark #paramsDiv .form-line[type="color"] i,
 .dark #paramsDiv .form-line[type="range"] i,
 .dark #paramsDiv .form-line[type="slider"] i {

packages/params-form/src/params.js

@@ -10,9 +10,10 @@ export const forEachButton = (el, cb) => forQS(el, BUTTON_SELECTOR, cb)
 const numeric = { number: 1, float: 1, int: 1, range: 1, slider: 1 }
 
 function applyRange(inp) {
-  const info = inp.previousElementSibling
-  if (info && info.tagName === 'I') {
-    info.innerText = inp.value
+  let info = inp.previousElementSibling
+  if (info) {
+    if (info.tagName === 'SPAN') { info = info.querySelector('i') }
+    if (info.tagName === 'I') info.innerText = inp.value
   }
 }
 
@@ -115,7 +116,13 @@ export const genParams = ({
     html += `>${caption}</label>`
 
     // value
-    html += `<i>${def.value}</i>`
+    let valHtml = `<i>${def.value}</i>`
+    if (type == 'slider' || type == 'range')
+      valHtml = `<span class='i-locker'>${valHtml}</span>`
+    //
+    //console.log(type)
+    //
+    html += valHtml
 
     const inputFunc = funcs[type] || inputDefault
     if (inputFunc) html += inputFunc(def)
@@ -146,7 +153,8 @@ export const genParams = ({
       applyRange(inp)
       if (inp.getAttribute('live') === '1') _callback('live')
     })
-    if (inp.getAttribute('live') !== '1') inp.addEventListener('change', () => _callback('change'))
+    if (inp.getAttribute('live') !== '1')
+      inp.addEventListener('change', () => _callback('change'))
   })
 
   function groupClick(evt) {