Multi Range Slider component (#2194)

* Multi Range Slider component * Corrections in docs
mdbootstrap · Nov 30, 2023 · 029e847 · 029e847
1 parent 1d0cffc
commit 029e847
Show file tree

Hide file tree

Showing 14 changed files with 2,424 additions and 0 deletions.
diff --git a/demo/sites/forms/multi-range.html b/demo/sites/forms/multi-range.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="" />
+    <meta name="author" content="TW Elements" />
+    <title>Album example · Bootstrap v5.1</title>
+
+    <!-- Roboto font -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
+      rel="stylesheet" />
+    <!-- Tailwind -->
+    <link rel="stylesheet" href="../../../src/scss/tailwind.scss" />
+    <!-- PRISM -->
+    <link rel="stylesheet" href="../../dev/css/new-prism.css" />
+    <!-- Theme -->
+    <meta name="theme-color" content="#f8fafc" />
+    <script>
+      try {
+        if (
+          localStorage.theme === "dark" ||
+          (!("theme" in localStorage) &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches)
+        ) {
+          document.documentElement.classList.add("dark");
+          document
+            .querySelector('meta[name="theme-color"]')
+            .setAttribute("content", "#0B1120");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      } catch (_) {}
+    </script>
+    <!-- Custom styles -->
+  </head>
+
+  <body class="dark:bg-neutral-800">
+    <!-- Start your project here-->
+    <div class="mx-6 md:mx-16 lg:mx-44 xl:mx-96">
+      <br />
+      <br />
+      <br />
+
+      <h1
+        class="my-0 text-5xl font-medium leading-tight text-neutral-800 dark:text-white">
+        Multi range slider
+      </h1>
+
+      <br />
+      <br />
+      <br />
+
+      <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
+        Basic example
+      </h3>
+
+      <div data-te-multi-range-slider-init></div>
+
+      <br />
+      <br />
+      <br />
+
+      <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
+        Basic example with values
+      </h3>
+
+      <div id="multi-range-basic" data-te-multi-range-slider-init></div>
+      <div id="multi-range-basic-value" class="mt-3">
+        Value:
+        <span class="flex flex-col">
+          <div>First:</div>
+          <div>Second:</div>
+        </span>
+      </div>
+
+      <br />
+      <br />
+      <br />
+
+      <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
+        One range
+      </h3>
+
+      <div data-te-multi-range-slider-init data-te-number-of-ranges="1"></div>
+
+      <br />
+      <br />
+      <br />
+
+      <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
+        Start values
+      </h3>
+
+      <div
+        id="multi-range-start-values"
+        data-te-multi-range-slider-init
+        data-te-start-values="[40, 80]"></div>
+      <div id="multi-range-start-values-show" class="mt-3">Value:</div>
+
+      <br />
+      <br />
+      <br />
+
+      <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
+        Tooltips
+      </h3>
+
+      <div data-te-multi-range-slider-init data-te-tooltip="true"></div>
+
+      <br />
+      <br />
+      <br />
+
+      <h3 class="mb-4 text-3xl font-medium leading-tight text-red-600">
+        Step example
+      </h3>
+
+      <div data-te-multi-range-slider-init data-te-step="5"></div>
+
+      <br />
+      <br />
+      <br />
+    </div>
+    <!-- End your project here-->
+
+    <!-- Theme switcher -->
+    <script type="module" src="../../../src/js/theme.js"></script>
+    <!-- PRISM -->
+    <script type="module" src="../../dev/js/new-prism.js"></script>
+    <!-- MDB -->
+    <script type="module" src="../../../src/js/index.umd.js"></script>
+    <!-- MDB SNIPPET -->
+    <script type="module" src="../../dev/js/dist/mdbsnippet.min.js"></script>
+    <!-- Custom scripts -->
+    <script type="module">
+      // basic example with values
+
+      const basicExample = document.querySelector("#multi-range-basic");
+      const oneRangeValueBasic = document.querySelector(
+        "#multi-range-basic-value"
+      );
+
+      basicExample.addEventListener("valueChanged.te.multiRangeSlider", (e) => {
+        const [first, second] = e.values.rounded;
+        oneRangeValueBasic.innerHTML = `
+            Value:
+            <div class="flex flex-col">
+              <div>First: ${first}</div>
+              <div>Second: ${second}</div>
+            </div>
+          `;
+      });
+
+      basicExample.addEventListener("start.te.multiRangeSlider", (e) => {
+        console.log("start");
+      });
+
+      // start values
+
+      const startValue = document.querySelector("#multi-range-start-values");
+      const startValueValues = document.querySelector(
+        "#multi-range-start-values-show"
+      );
+
+      startValue.addEventListener("valueChanged.te.multiRangeSlider", (e) => {
+        startValueValues.innerHTML = `
+          Value:
+          <span class="flex flex-col">
+            <div>First: ${e.values.rounded[0]}</div>
+            <div>Second  ${e.values.rounded[1]}</div>
+          </span>
+        `;
+      });
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -418,6 +418,11 @@ <h3 class="my-5 text-2xl">Forms:</h3>
             class="mb-1 mr-1 rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
             >Register form</a
           >
+          <a
+            href="./demo/sites/forms/multi-range.html"
+            class="mb-1 mr-1 rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
+            >Multi range slider</a
+          >
         </div>
 
         <!-- METHODS -->

diff --git a/site/content/docs/standard/forms/multi-range/a-ss.html b/site/content/docs/standard/forms/multi-range/a-ss.html
@@ -0,0 +1,18 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#api-section-import">Import</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-usage">Usage</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-options">Options</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-classes">Classes</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-methods">Methods</a>
+</li>