Play with slider

Author: jochasinga

package.json

@@ -33,6 +33,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@sveltestrap/sveltestrap": "^6.2.7",
 		"elkjs": "^0.9.3",
 		"rete-auto-arrange-plugin": "^2.0.2",
 		"web-worker": "^1.3.0"

src/lib/Slider.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  $:value = 25;
+
+  let progressBar: HTMLDivElement;
+  let mouseIsDown = false;
+  let mouseIsInRange = false;
+
+  function increment() {
+    if (value < 100) {
+      setTimeout(() => {
+        value += 1;
+      }, 100);
+    }
+  }
+
+  function decrement() {
+    if (value > 0) {
+      setTimeout(() => {
+        value -= 1;
+      }, 100)
+    }
+  }
+
+  function handleMouseUp(event: any) {
+    mouseIsDown = false;
+    mouseIsInRange = false;
+  }
+
+  function handleMouseDown(event: any) {
+    mouseIsDown = true;
+    let x = event.clientX;
+    let y = event.clientY;
+    let {top, right, bottom, left} = progressBar.getBoundingClientRect();
+    console.log(`X: ${x}, Y: ${y}`);
+    console.log(`normalize: ${x / window.innerWidth * 100}`);
+    console.log(`Top: ${top}, Right: ${right}, Bottom: ${bottom}, Left: ${left}`);
+    if (x < right && x > right - 30) {
+      if (y < bottom && y > top) {
+        mouseIsInRange = true;
+        console.log("HIT");
+      }
+    }
+  }
+
+  function handleMouseDrag(event: any) {
+    if (mouseIsDown) {
+      let { right } = progressBar.getBoundingClientRect();
+      value = Math.round(event.clientX / window.innerWidth * 100);
+      // value = event.clientX - progressBar.getBoundingClientRect().left;
+    }
+  }
+
+  onMount(() => {
+    // progressBar.setAttribute("style", "width: {value}%");
+  })
+</script>
+
+<div id="myContainer">
+  <button class="btn btn-primary btn-small" on:click={decrement}>-</button>
+  <button class="btn btn-primary btn-small" on:click={increment}>+</button>
+  <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
+    <div
+      class="progress-bar bg-success"
+      style="width: {value}%"
+      on:mousedown={e => handleMouseDown(e)}
+      on:mouseup={e => handleMouseUp(e)}
+      on:drag={e => handleMouseDrag(e)}
+      bind:this={progressBar}
+    >{value}%</div>
+  </div>
+</div>
+
+
+<style>
+</style>

src/routes/+page.svelte

@@ -1,14 +1,25 @@
 <script>
 	import { onMount } from "svelte";
+	import { Styles } from '@sveltestrap/sveltestrap';
+	/**
+	 * @type {HTMLElement}
+	 */
 	let el;
 
+	import Slider from "$lib/Slider.svelte";
+
 	onMount(async () => {
 	  const { createEditor } = await import("../lib/editor");
 	  createEditor(el);
 	});
 </script>
 
-<div class="rete" bind:this={el} />
+<main>
+	<Styles />
+	<Slider />
+	<div class="rete" bind:this={el} />
+
+</main>
 
 
 <style>

yarn.lock

@@ -200,6 +200,11 @@
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@sveltejs/adapter-auto@^2.0.0":
   version "2.1.0"
   resolved "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz"
@@ -250,6 +255,13 @@
     svelte-hmr "^0.15.2"
     vitefu "^0.2.4"
 
+"@sveltestrap/sveltestrap@^6.2.7":
+  version "6.2.7"
+  resolved "https://registry.yarnpkg.com/@sveltestrap/sveltestrap/-/sveltestrap-6.2.7.tgz#5b2736cbee2db973f02b09d2e9d5bf819418f1f9"
+  integrity sha512-WwLLfAFUb42BGuRrf3Vbct30bQMzlEMMipN/MfxhjuLTmLQeW9muVJfPyvjtWS+mY+RjkSCoHvAp/ZobP1NLlQ==
+  dependencies:
+    "@popperjs/core" "^2.11.8"
+
 "@tweenjs/tween.js@~18.6.4":
   version "18.6.4"
   resolved "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz"