fix: include tick for slider default in template-default (#267)

Fixes #11
climateinteractive · Oct 24, 2022 · 783a9b2 · 783a9b2
1 parent e93101e
commit 783a9b2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/examples/template-default/packages/app/src/index.css b/examples/template-default/packages/app/src/index.css
@@ -114,6 +114,22 @@ p {
   margin-bottom: 24px;
 }
 
+.input-slider-row {
+  position: relative;
+  width: 94%;
+  margin-left: 3%;
+}
+
+.input-slider-tick {
+  position: absolute;
+  top: 12px;
+  width: 4px;
+  height: 14px;
+  transform: translate(-2px, 0);
+  border-radius: 4px;
+  background: #fafafa;
+}
+
 .switch-checkbox {
   margin-bottom: 8px;
 }
@@ -161,9 +177,8 @@ p {
  */
 
 .slider.slider-horizontal {
-  width: 94%;
+  width: 100%;
   height: 16px;
-  margin-left: 3%;
   margin-top: 4px;
   margin-bottom: 4px;
 }
@@ -172,6 +187,7 @@ p {
   height: 8px;
   top: 4px; /* (slider-handle:height / 2) - (slider-track:height / 2) */
   margin-top: 0;
+  background: #fafafa;
 }
 
 .slider-rangeHighlight {

diff --git a/examples/template-default/packages/app/src/index.js b/examples/template-default/packages/app/src/index.js
@@ -53,9 +53,18 @@ function addSliderItem(sliderInput) {
     $(`<div class="input-units">${str(spec.unitsKey)}</div>`)
   ])
 
+  let tickPos = (spec.defaultValue - spec.minValue) / (spec.maxValue - spec.minValue)
+  if (spec.reversed) {
+    tickPos = 1 - tickPos
+  }
+  const sliderRow = $(`<div class="input-slider-row"/>`).append([
+    $(`<div class="input-slider-tick" style="left:${tickPos * 100}%"></div>`),
+    $(`<input id="${inputElemId}" class="slider" type="text"></input>`)
+  ])
+
   const div = $(`<div class="input-item"/>`).append([
     titleRow,
-    $(`<input id="${inputElemId}" class="slider" type="text"></input>`),
+    sliderRow,
     $(`<div class="input-desc">${spec.descriptionKey ? str(spec.descriptionKey) : ''}</div>`)
   ])