From f00f9aecd5789c6e8401df08f254acfac4113d5b Mon Sep 17 00:00:00 2001
From: BobChao87 <bobchao87@gmail.com>
Date: Tue, 23 Nov 2021 02:03:19 -0800
Subject: [PATCH] Adds an element used to represent a range

Related to Issue #38
---
 components/element/Range.vue | 72 ++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 components/element/Range.vue

diff --git a/components/element/Range.vue b/components/element/Range.vue
new file mode 100644
index 00000000..84e3087d
--- /dev/null
+++ b/components/element/Range.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="element-range" :style="rangeCutoffs">
+    <div class="selected-range" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  props: {
+    start: {
+      type: Number,
+      default: 0,
+    },
+    end: {
+      type: Number,
+      default: 0,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  computed: {
+    rangeCutoffs(): { '--start-range': string, '--end-range': string } {
+      return {
+        '--start-range': `${100 * (this.start - this.min) / (this.max - this.min)}%`,
+        '--end-range': `${100 * (this.max - this.end) / (this.max - this.min)}%`,
+      };
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '~bulmaswatch/solar/variables' as solar;
+@use '~bulma/sass/utilities/initial-variables' as bulma;
+
+.element-range {
+  --start-range: 0%;
+  --end-range: 100%;
+
+  position: relative;
+  border: none;
+  border-radius: bulma.$radius-rounded;
+  display: block;
+  height: 1rem;
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+  background-color: bulma.$grey-lightest;
+
+  .selected-range {
+    position: absolute;
+    border: none;
+    border-radius: bulma.$radius-rounded;
+    display: block;
+    height: 100%;
+    overflow: hidden;
+    left: var(--start-range);
+    right: var(--end-range);
+    // TODO Make with the colors
+    background-color: solar.$primary;
+  }
+}
+</style>