Allow show/hide markers and fix height of container

Author: erimicel

README.md

@@ -115,7 +115,6 @@ If you find this package helpful, please ⭐ the repository on GitHub!
 - Support vertical slider
 - Support tailwindcssv4 and boostrap5 themes
 - Support more options for tooltip (position, distance etc.)
-- Support show/hide markers
 - Support more custom UI elements (pointers, gradient etc.)
 - Add onChange custom event that can be ported to custom controller
 - Add destroy custom event

index.html

@@ -59,6 +59,14 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
         <input type="text" data-range-slider-target="inputMin" value="5">
       </div>
 
+      <!-- Single Range Slider with markers -->
+      <div data-controller="range-slider" data-range-slider-values-value="1..10" data-range-slider-markers-value="true">
+        <label class="block mb-2 text-sm font-medium text-gray-700 ">Example of single range
+          slider with markers</label>
+
+        <input type="text" data-range-slider-target="inputMin" value="5">
+      </div>
+
       <!-- Single Range Slider with Width -->
       <div data-controller="range-slider" data-range-slider-values-value="1..10" data-range-slider-width-value="50%">
         <label class="block mb-2 text-sm font-medium text-gray-700 ">Example of single range slider with
@@ -86,6 +94,15 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
         <input type="text" data-range-slider-target="inputMin" value="5">
       </div>
 
+      <!-- Single Range Slider with Labels and markers -->
+      <div data-controller="range-slider" data-range-slider-values-value="1..10" data-range-slider-labels-value="true"
+        data-range-slider-markers-value="true">
+        <label class="block mb-2 text-sm font-medium text-gray-700">Example of single range slider with
+          labels and markers</label>
+
+        <input type="text" data-range-slider-target="inputMin" value="5">
+      </div>
+
       <!-- Single Range Slider with Labels and Step -->
       <div data-controller="range-slider" data-range-slider-values-value="0..150" data-range-slider-labels-value="true"
         data-range-slider-step-value="10">
@@ -131,6 +148,16 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
         <input type="text" data-range-slider-target="inputMax" value="5">
       </div>
 
+      <!-- Multi Range Slider with Labels and markers -->
+      <div data-controller="range-slider" data-range-slider-values-value="1..10" data-range-slider-labels-value="true"
+        data-range-slider-markers-value="true">
+        <label class="block mb-2 text-sm font-medium text-gray-700">Example of multi point range slider
+          with labels and markers</label>
+
+        <input type="text" data-range-slider-target="inputMin" value="2">
+        <input type="text" data-range-slider-target="inputMax" value="5">
+      </div>
+
       <!-- Multi Range Slider with Tooltips -->
       <div data-controller="range-slider" data-range-slider-values-value="1..10" data-range-slider-labels-value="true"
         data-range-slider-tooltip-value="true">
@@ -198,7 +225,7 @@ <h2 class="mb-6 text-2xl font-semibold text-gray-800">
 
       <!-- Volume Vertical Range Slider -->
       <div data-controller="range-slider" data-range-slider-values-value="0..100"
-        data-range-slider-vertical-value="true">
+        data-range-slider-vertical-value="true" data-range-slider-markers-value="true">
         <label class="block mb-2 text-sm font-medium text-gray-700 ">Example of volume vertical range
           slider</label>
 

src/range_slider.css

@@ -1,7 +1,10 @@
 .rs-container {
-  height: 45px;
+  height: 46px;
   position: relative;
 }
+.rs-container.-no-labels {
+  height: 26px;
+}
 .rs-container .rs-bg,
 .rs-container .rs-selected {
   background-color: rgb(229, 231, 235);
@@ -67,11 +70,11 @@
   top: 5px;
   white-space: nowrap;
 }
-.rs-container .rs-scale span {
+.rs-container .rs-scale div {
   float: left;
   position: relative;
 }
-.rs-container .rs-scale span::before {
+.rs-container .rs-scale div.rs-marker::before {
   background-color: #ededed;
   content: "";
   height: 8px;
@@ -80,18 +83,21 @@
   top: 10px;
   width: 1px;
 }
-.rs-container .rs-scale span:last-child {
+.rs-container .rs-scale div:last-child {
   margin-left: -1px;
   width: 0px;
 }
-.rs-container .rs-scale span ins {
+.rs-container .rs-scale div span {
   color: #333;
   display: inline-block;
   font-size: 12px;
-  margin-top: 20px;
+  margin-top: 14px;
   text-decoration: none;
 }
-.rs-container.disabled .rs-scale span ins {
+.rs-container .rs-scale div span.rs-marker {
+  margin-top: 20px;
+}
+.rs-container.disabled .rs-scale div span {
   color: #999;
 }
 .rs-tooltip {

src/range_slider.js

@@ -9,6 +9,7 @@ export default class extends Controller {
     labels: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     vertical: { type: Boolean, default: false },
+    markers: { type: Boolean, default: false },
     selectedColour: String,
     currency: String,
     values: String,
@@ -57,6 +58,7 @@ export default class extends Controller {
         scale: "rs-scale",
         pointer: "rs-pointer",
         tip: "rs-tooltip",
+        marker: "rs-marker",
       },
       "tailwindcss-v4": {
         container: "relative h-10 w-full",
@@ -67,6 +69,7 @@ export default class extends Controller {
         pointer: `absolute cursor-pointer z-10 inline-block size-5 transform rounded-full border border-gray-200
                      bg-white ring-0 shadow-sm transition-transform duration-200 ease-in-out translate-x-5`,
         tip: "bg-gray-800 text-white text-xs px-1 rounded",
+        marker: "absolute h-2 w-1 bg-gray-200",
       },
     };
 
@@ -229,6 +232,8 @@ export default class extends Controller {
       this.slider.classList.remove("disabled");
     }
 
+    if (!this.labelsValue) this.slider.classList.add("-no-labels");
+
     if (this.hasSelectedColourValue) {
       this.selected.style.backgroundColor = this.selectedColourValue;
       this.selected.style.borderColor = this.selectedColourValue;
@@ -241,19 +246,24 @@ export default class extends Controller {
 
   createScale() {
     this.stepWidth = this.sliderWidth / (this.values.range.length - 1);
-    this.scale.innerHTML = "";
 
     for (let i = 0; i < this.values.range.length; i++) {
-      const span = document.createElement("span");
-      const ins = document.createElement("ins");
-      span.appendChild(ins);
-      this.scale.appendChild(span);
-      span.style.width =
+      const labelContainer = document.createElement("div");
+      const label = document.createElement("span");
+
+      if (this.markersValue) {
+        labelContainer.classList.add(this.klasses.marker);
+        label.classList.add(this.klasses.marker);
+      }
+
+      labelContainer.appendChild(label);
+      this.scale.appendChild(labelContainer);
+      labelContainer.style.width =
         i === this.values.range.length - 1 ? 0 : this.stepWidth + "px";
-      ins.innerHTML = this.labelsValue
+      label.innerHTML = this.labelsValue
         ? this.formatStr(this.values.range[i])
         : "";
-      ins.style.marginLeft = (ins.clientWidth / 2) * -1 + "px";
+      label.style.marginLeft = (label.clientWidth / 2) * -1 + "px";
     }
   }
 
@@ -338,14 +348,24 @@ export default class extends Controller {
 
   addEvents() {
     this.slider.addEventListener("mousemove", this.move.bind(this));
-    this.slider.addEventListener("touchmove", this.move.bind(this));
+    this.slider.addEventListener("touchmove", this.move.bind(this), {
+      passive: true,
+    });
     this.slider.addEventListener("mouseup", this.drop.bind(this));
-    this.slider.addEventListener("touchend", this.drop.bind(this));
-    this.slider.addEventListener("touchcancel", this.drop.bind(this));
+    this.slider.addEventListener("touchend", this.drop.bind(this), {
+      passive: true,
+    });
+    this.slider.addEventListener("touchcancel", this.drop.bind(this), {
+      passive: true,
+    });
     this.pointerL.addEventListener("mousedown", this.drag.bind(this));
-    this.pointerL.addEventListener("touchstart", this.drag.bind(this));
+    this.pointerL.addEventListener("touchstart", this.drag.bind(this), {
+      passive: true,
+    });
     this.pointerR?.addEventListener("mousedown", this.drag.bind(this));
-    this.pointerR?.addEventListener("touchstart", this.drag.bind(this));
+    this.pointerR?.addEventListener("touchstart", this.drag.bind(this), {
+      passive: true,
+    });
     window.addEventListener("resize", this.onResize.bind(this));
 
     const pieces = this.slider.querySelectorAll("span");