From 4390bf83cbbb2fa4305f7e1ccf6ada22034f408c Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Fri, 18 Aug 2023 17:56:45 +0200
Subject: [PATCH 01/13] create BIMDataSlider component & Slider documentation

---
 .../BIMDataSlider/BIMDataSlider.vue           | 79 +++++++++++++++++++
 .../BIMDataSlider/_BIMDataSlider.scss         | 51 ++++++++++++
 src/BIMDataComponents/index.js                |  1 +
 src/web/router.js                             |  5 ++
 src/web/store.js                              |  7 ++
 src/web/views/Components/Slider/Slider.vue    | 42 ++++++++++
 6 files changed, 185 insertions(+)
 create mode 100644 src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
 create mode 100644 src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
 create mode 100644 src/web/views/Components/Slider/Slider.vue

diff --git a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
new file mode 100644
index 00000000..175c4e4f
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="bimdata-slider">
+    <input
+      ref="input"
+      class="bimdata-slider-input"
+      type="range"
+      :style="`--background-size: ${backgroundSize}%`"
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="modelValue"
+      :disabled="disabled"
+      @input="onInput"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    min: {
+      type: [Number, String],
+      default: null,
+    },
+    max: {
+      type: [Number, String],
+      default: null,
+    },
+    step: {
+      type: [Number, String],
+      default: null,
+    },
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      backgroundSize: 0,
+    };
+  },
+  watch: {
+    modelValue() {
+      this.$nextTick(() => {
+        this.backgroundSize = this.getBackgroundSize();
+      });
+    },
+  },
+  mounted() {
+    this.backgroundSize = this.getBackgroundSize();
+  },
+  methods: {
+    getBackgroundSize() {
+      const input = this.$refs.input;
+
+      if (!input) return null;
+
+      const min = +input.min || 0;
+      const max = +input.max || 100;
+      const value = +input.value;
+
+      const size = ((value - min) / (max - min)) * 100;
+
+      return size;
+    },
+    onInput(event) {
+      this.$emit("update:modelValue", +event.target.value);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_BIMDataSlider.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss b/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
new file mode 100644
index 00000000..02448922
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
@@ -0,0 +1,51 @@
+.bimdata-slider {
+  position: relative;
+  .bimdata-slider-input {
+    &::-webkit-slider-runnable-track {
+      height: 3px;
+      background: linear-gradient(
+          to right,
+          var(--color-primary),
+          var(--color-primary)
+        ),
+        var(--color-silver);
+      background-size: var(--background-size, 0%) 100%;
+      background-repeat: no-repeat;
+      border-radius: 5px;
+    }
+    &::-webkit-slider-thumb {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+      background: var(--color-primary);
+      border: solid var(--color-white) 1px;
+      border-radius: 50%;
+      margin-top: -6px;
+      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+    }
+    &::-moz-range-progress {
+      background-color: var(--color-primary);
+      border-radius: 5px;
+    }
+    &::-moz-range-track {
+      background-color: var(--color-silver);
+      border-radius: 5px;
+    }
+    &::-moz-range-thumb {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+      background: var(--color-primary);
+      border: solid var(--color-white) 1px;
+      border-radius: 50%;
+      margin-top: -6px;
+      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+    }
+  }
+  .bimdata-slider-input,
+  .bimdata-slider-input::-webkit-slider-runnable-track,
+  .bimdata-slider-input::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+  }
+}
diff --git a/src/BIMDataComponents/index.js b/src/BIMDataComponents/index.js
index 1b55be36..cb169df1 100644
--- a/src/BIMDataComponents/index.js
+++ b/src/BIMDataComponents/index.js
@@ -35,6 +35,7 @@ export { default as BIMDataSearchAutocomplete } from "./BIMDataSearchAutocomplet
 export { default as BIMDataSelect } from "./BIMDataSelect/BIMDataSelect.vue";
 export { default as BIMDataSimplePieChart } from "./BIMDataSimplePieChart/BIMDataSimplePieChart.vue";
 export { default as BIMDataSpinner } from "./BIMDataSpinner/BIMDataSpinner.vue";
+export { default as BIMDataSlider } from "./BIMDataSlider/BIMDataSlider.vue";
 export { default as BIMDataTable } from "./BIMDataTable/BIMDataTable.vue";
 export { default as BIMDataTabs } from "./BIMDataTabs/BIMDataTabs.vue";
 export { default as BIMDataText } from "./BIMDataText/BIMDataText.vue";
diff --git a/src/web/router.js b/src/web/router.js
index e708f8f8..f6371625 100644
--- a/src/web/router.js
+++ b/src/web/router.js
@@ -207,6 +207,11 @@ const routes = [
         name: "select",
         component: () => import("./views/Components/Select/Select.vue"),
       },
+      {
+        path: "slider",
+        name: "slider",
+        component: () => import("./views/Components/Slider/Slider.vue"),
+      },
       {
         path: "table",
         name: "table",
diff --git a/src/web/store.js b/src/web/store.js
index 6731e789..d6411272 100644
--- a/src/web/store.js
+++ b/src/web/store.js
@@ -282,6 +282,13 @@ export default {
         text: "Select (dropdown) is used to enabled a user to select a single item from a list of options.",
         btn: "View select",
       },
+      {
+        title: "Slider",
+        img: select,
+        path: "slider",
+        text: "slider",
+        btn: "View slider",
+      },
       {
         title: "Table",
         img: table,
diff --git a/src/web/views/Components/Slider/Slider.vue b/src/web/views/Components/Slider/Slider.vue
new file mode 100644
index 00000000..fad181a0
--- /dev/null
+++ b/src/web/views/Components/Slider/Slider.vue
@@ -0,0 +1,42 @@
+<template>
+  <main class="article slider">
+    <div class="article-wrapper">
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
+      <ComponentCode :componentTitle="$route.name" language="javascript">
+        <template #module>
+          <div class="m-t-24">
+            <BIMDataSlider v-model="slider" min="0" max="100" />
+          </div>
+        </template>
+
+        <template #parameters> </template>
+
+        <template #import>
+          import BIMDataSlider from
+          "@bimdata/design-system/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue";
+        </template>
+
+        <template #code> </template>
+      </ComponentCode>
+    </div>
+  </main>
+</template>
+
+<script>
+import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+
+export default {
+  components: {
+    ComponentCode,
+  },
+  data() {
+    return {
+      slider: 0,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

From 146b4288d911ba75be15baabf4b677fc0660466d Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 6 Sep 2023 18:18:47 +0200
Subject: [PATCH 02/13] create slider icon

---
 src/web/assets/img/icon-slider.svg | 24 ++++++++++++++++++++++++
 src/web/store.js                   |  3 ++-
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/web/assets/img/icon-slider.svg

diff --git a/src/web/assets/img/icon-slider.svg b/src/web/assets/img/icon-slider.svg
new file mode 100644
index 00000000..42206e53
--- /dev/null
+++ b/src/web/assets/img/icon-slider.svg
@@ -0,0 +1,24 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.7" cx="47.9688" cy="22.0312" r="18.5" fill="url(#paint0_linear_4888_142)"/>
+<rect width="48.3004" height="5" transform="matrix(1 1.74846e-07 1.74846e-07 -1 10.8497 37.5)" fill="#D8D8D8"/>
+<rect width="21.4761" height="5" transform="matrix(1 1.74846e-07 1.74846e-07 -1 10.8497 37.5)" fill="#2F374A"/>
+<g filter="url(#filter0_d_4888_142)">
+<path d="M31.7856 27.5C35.9278 27.5 39.2856 30.8579 39.2856 35C39.2856 39.1421 35.9278 42.5 31.7856 42.5C27.6435 42.5 24.2856 39.1421 24.2856 35C24.2856 30.8579 27.6435 27.5 31.7856 27.5Z" fill="#2F374A"/>
+<path d="M31.7856 27.5C35.9278 27.5 39.2856 30.8579 39.2856 35C39.2856 39.1421 35.9278 42.5 31.7856 42.5C27.6435 42.5 24.2856 39.1421 24.2856 35C24.2856 30.8579 27.6435 27.5 31.7856 27.5Z" stroke="#D8D8D8"/>
+</g>
+<defs>
+<filter id="filter0_d_4888_142" x="13.7856" y="18" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4888_142"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4888_142" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_4888_142" x1="62.8437" y1="10.8438" x2="33.9688" y2="33.1563" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8C62C"/>
+<stop offset="1" stop-color="#F8C62C" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/web/store.js b/src/web/store.js
index d6411272..6dc18be5 100644
--- a/src/web/store.js
+++ b/src/web/store.js
@@ -31,6 +31,7 @@ import safe_zone_inline from "./assets/img/icon-safe_zone_inline.svg";
 import search from "./assets/img/icon-search.svg";
 import search_autocomplete from "./assets/img/icon-search_autocomplete.svg";
 import select from "./assets/img/icon-select.svg";
+import slider from "./assets/img/icon-slider.svg";
 import table from "./assets/img/icon-table.svg";
 import tabs from "./assets/img/icon-tabs.svg";
 import text from "./assets/img/icon-text.svg";
@@ -284,7 +285,7 @@ export default {
       },
       {
         title: "Slider",
-        img: select,
+        img: slider,
         path: "slider",
         text: "slider",
         btn: "View slider",

From 620f2a6377a43a3b8818a0021b687dd7b1b190fe Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 6 Sep 2023 18:19:04 +0200
Subject: [PATCH 03/13] add tooltip for slider

---
 .../BIMDataSlider/BIMDataSlider.vue           | 23 +++++++++++++++
 .../BIMDataSlider/_BIMDataSlider.scss         | 29 +++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
index 175c4e4f..e9de1861 100644
--- a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
+++ b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
@@ -12,6 +12,9 @@
       :disabled="disabled"
       @input="onInput"
     />
+    <output class="bimdata-slider-tooltip" :style="{ left: tooltipPosition }">{{
+      modelValue
+    }}</output>
   </div>
 </template>
 
@@ -43,12 +46,24 @@ export default {
   data() {
     return {
       backgroundSize: 0,
+      tooltipPosition: `calc(${this.modelValue}% + (${
+        8 - this.modelValue * 0.18
+      }px))`,
     };
   },
   watch: {
     modelValue() {
       this.$nextTick(() => {
         this.backgroundSize = this.getBackgroundSize();
+
+        // let sliderWidth = document.getElementsByClassName(
+        //   "bimdata-slider-input"
+        // )[0].offsetWidth;
+        // let  tooltipWidth = document.getElementsByClassName(
+        //   "bimdata-slider-tooltip"
+        // )[0].offsetWidth;
+
+        this.getTooltipPosition();
       });
     },
   },
@@ -72,6 +87,14 @@ export default {
     onInput(event) {
       this.$emit("update:modelValue", +event.target.value);
     },
+    getTooltipPosition() {
+      this.tooltipPosition = this.modelValue;
+      const val = this.modelValue;
+      const min = this.min ? this.min : 0;
+      const max = this.max ? this.max : 100;
+      const newVal = Number(((val - min) * 100) / (max - min));
+      this.tooltipPosition = `calc(${newVal}% + (${8 - newVal * 0.18}px))`;
+    },
   },
 };
 </script>
diff --git a/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss b/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
index 02448922..f26b8dec 100644
--- a/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
+++ b/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
@@ -42,6 +42,35 @@
       box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
     }
   }
+  &:hover {
+    .bimdata-slider-tooltip {
+      opacity: 1;
+      transition: opacity 0.2s ease-out;
+    }
+  }
+  &-tooltip {
+    background: var(--color-primary);
+    color: var(--color-white);
+    padding: calc(var(--spacing-unit) / 2);
+    position: absolute;
+    border-radius: 4px;
+    bottom: calc(var(--spacing-unit) * 3);
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+    &::after {
+      border: 5px solid transparent;
+      border-top-color: var(--color-primary);
+      bottom: 5px * -2;
+      content: "";
+      height: 0;
+      left: 50%;
+      position: absolute;
+      transform: translate(-50%);
+      width: 0;
+    }
+  }
   .bimdata-slider-input,
   .bimdata-slider-input::-webkit-slider-runnable-track,
   .bimdata-slider-input::-webkit-slider-thumb {

From 15e4adcdbaad61f0f2ab5741be9cca5098ca7fec Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 6 Sep 2023 18:19:17 +0200
Subject: [PATCH 04/13] add parameters for slider documentation

---
 src/web/views/Components/Slider/Slider.vue | 24 +++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/web/views/Components/Slider/Slider.vue b/src/web/views/Components/Slider/Slider.vue
index fad181a0..605b5b61 100644
--- a/src/web/views/Components/Slider/Slider.vue
+++ b/src/web/views/Components/Slider/Slider.vue
@@ -7,11 +7,27 @@
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <div class="m-t-24">
-            <BIMDataSlider v-model="slider" min="0" max="100" />
+            <BIMDataSlider v-model="slider" :min="minRange" :max="maxRange" />
           </div>
         </template>
 
-        <template #parameters> </template>
+        <template #parameters>
+          <BIMDataInput
+            type="number"
+            placeholder="Min range"
+            v-model="minRange"
+          />
+          <BIMDataInput
+            type="number"
+            placeholder="Max range"
+            v-model="maxRange"
+          />
+          <BIMDataInput
+            type="number"
+            placeholder="Slider default value"
+            v-model="slider"
+          />
+        </template>
 
         <template #import>
           import BIMDataSlider from
@@ -33,7 +49,9 @@ export default {
   },
   data() {
     return {
-      slider: 0,
+      slider: 40,
+      minRange: 0,
+      maxRange: 100,
     };
   },
 };

From 7182b6f4842d463917c6309298cd5cc4466baba5 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 6 Sep 2023 18:20:58 +0200
Subject: [PATCH 05/13] delete dead code

---
 src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
index e9de1861..70726071 100644
--- a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
+++ b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
@@ -56,13 +56,6 @@ export default {
       this.$nextTick(() => {
         this.backgroundSize = this.getBackgroundSize();
 
-        // let sliderWidth = document.getElementsByClassName(
-        //   "bimdata-slider-input"
-        // )[0].offsetWidth;
-        // let  tooltipWidth = document.getElementsByClassName(
-        //   "bimdata-slider-tooltip"
-        // )[0].offsetWidth;
-
         this.getTooltipPosition();
       });
     },

From 81f9fcb9f6e524e1afd62d52ad5eef76b4ead84d Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 6 Sep 2023 18:21:50 +0200
Subject: [PATCH 06/13] delete dead code

---
 src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
index 70726071..b94d4144 100644
--- a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
+++ b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
@@ -81,7 +81,6 @@ export default {
       this.$emit("update:modelValue", +event.target.value);
     },
     getTooltipPosition() {
-      this.tooltipPosition = this.modelValue;
       const val = this.modelValue;
       const min = this.min ? this.min : 0;
       const max = this.max ? this.max : 100;

From c19b15f8352a8299177df244a4e19aa405358065 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 6 Sep 2023 18:22:40 +0200
Subject: [PATCH 07/13] refacto

---
 src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
index b94d4144..874b408b 100644
--- a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
+++ b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
@@ -81,10 +81,9 @@ export default {
       this.$emit("update:modelValue", +event.target.value);
     },
     getTooltipPosition() {
-      const val = this.modelValue;
       const min = this.min ? this.min : 0;
       const max = this.max ? this.max : 100;
-      const newVal = Number(((val - min) * 100) / (max - min));
+      const newVal = Number(((this.modelValue - min) * 100) / (max - min));
       this.tooltipPosition = `calc(${newVal}% + (${8 - newVal * 0.18}px))`;
     },
   },

From 3548768f52fa4c1a82c07fe96c52b7bb982ff1df Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Thu, 7 Sep 2023 15:02:56 +0200
Subject: [PATCH 08/13] add boolean props for tooltip

---
 .../BIMDataSlider/BIMDataSlider.vue            | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
index 874b408b..83f5c8a4 100644
--- a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
+++ b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
@@ -12,9 +12,12 @@
       :disabled="disabled"
       @input="onInput"
     />
-    <output class="bimdata-slider-tooltip" :style="{ left: tooltipPosition }">{{
-      modelValue
-    }}</output>
+    <output
+      v-if="tooltip"
+      class="bimdata-slider-tooltip"
+      :style="{ left: tooltipPosition }"
+      >{{ modelValue }}</output
+    >
   </div>
 </template>
 
@@ -41,6 +44,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    tooltip: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["update:modelValue"],
   data() {
@@ -55,8 +62,9 @@ export default {
     modelValue() {
       this.$nextTick(() => {
         this.backgroundSize = this.getBackgroundSize();
-
-        this.getTooltipPosition();
+        if (this.tooltip) {
+          this.getTooltipPosition();
+        }
       });
     },
   },

From 3f4e66fb0b4a176729168c570434b95afde40219 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Thu, 7 Sep 2023 15:03:09 +0200
Subject: [PATCH 09/13] add slider documentation

---
 src/web/views/Components/Slider/Slider.vue    | 44 +++++++++++++++-
 .../views/Components/Slider/events-data.js    |  5 ++
 src/web/views/Components/Slider/props-data.js | 51 +++++++++++++++++++
 3 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 src/web/views/Components/Slider/events-data.js
 create mode 100644 src/web/views/Components/Slider/props-data.js

diff --git a/src/web/views/Components/Slider/Slider.vue b/src/web/views/Components/Slider/Slider.vue
index 605b5b61..d9bfb11f 100644
--- a/src/web/views/Components/Slider/Slider.vue
+++ b/src/web/views/Components/Slider/Slider.vue
@@ -7,7 +7,13 @@
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <div class="m-t-24">
-            <BIMDataSlider v-model="slider" :min="minRange" :max="maxRange" />
+            <BIMDataSlider
+              v-model="slider"
+              :min="minRange"
+              :max="maxRange"
+              :step="step"
+              :tooltip="tooltip"
+            />
           </div>
         </template>
 
@@ -27,6 +33,8 @@
             placeholder="Slider default value"
             v-model="slider"
           />
+          <BIMDataInput type="number" placeholder="Step value" v-model="step" />
+          <BIMDataCheckbox text="Tooltip" v-model="tooltip" />
         </template>
 
         <template #import>
@@ -34,13 +42,41 @@
           "@bimdata/design-system/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue";
         </template>
 
-        <template #code> </template>
+        <template #code>
+          &lt;BIMDataSlider v-model="{{ slider }}" :min="{{ minRange }}"
+          :max="{{ maxRange }}" :step="{{ step }}" :tooltip="{{ tooltip }}"
+          /&gt;
+        </template>
       </ComponentCode>
+
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Props:
+        </BIMDataText>
+        <BIMDataTable
+          :rowHeight="36"
+          :columns="propsData[0]"
+          :rows="propsData.slice(1)"
+        />
+      </div>
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Events:
+        </BIMDataText>
+        <BIMDataTable
+          :rowHeight="36"
+          :columns="eventsData[0]"
+          :rows="eventsData.slice(1)"
+        />
+      </div>
     </div>
   </main>
 </template>
 
 <script>
+import propsData from "./props-data.js";
+import eventsData from "./events-data.js";
+
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 
 export default {
@@ -52,6 +88,10 @@ export default {
       slider: 40,
       minRange: 0,
       maxRange: 100,
+      step: null,
+      tooltip: false,
+      propsData,
+      eventsData,
     };
   },
 };
diff --git a/src/web/views/Components/Slider/events-data.js b/src/web/views/Components/Slider/events-data.js
new file mode 100644
index 00000000..de4891f9
--- /dev/null
+++ b/src/web/views/Components/Slider/events-data.js
@@ -0,0 +1,5 @@
+/* eslint-disable */
+export default [
+  [ "Event name", "Payload" ],
+  [ "update:modelValue", "The slider input range value." ],
+];
diff --git a/src/web/views/Components/Slider/props-data.js b/src/web/views/Components/Slider/props-data.js
new file mode 100644
index 00000000..2a353ea3
--- /dev/null
+++ b/src/web/views/Components/Slider/props-data.js
@@ -0,0 +1,51 @@
+/* eslint-disable */
+export default [
+  [
+    "Props",
+    "Type",
+    "Required",
+    "Default value",
+    "Description",
+    "Example",
+  ],
+  [
+    "min",
+    "Number, String",
+    "",
+    "null",
+    "Use this props to define min range.",
+    "0",
+  ],
+  [
+    "max",
+    "Number, String",
+    "",
+    "null",
+    "Use this props to define max range.",
+    "100",
+  ],
+  [
+    "step",
+    "Number, String",
+    "",
+    "null",
+    "You can change the default step increment.",
+    "10",
+  ],
+  [
+    "modelValue",
+    "Number",
+    "",
+    "0",
+    "Slider input range value.",
+    "",
+  ],
+  [
+    "disabled",
+    "Boolean",
+    "",
+    "false",
+    "Use this props to disable slider.",
+    "true",
+  ],
+];

From f811aa7181e133a276d247e43663c07631c0401a Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Thu, 7 Sep 2023 15:03:28 +0200
Subject: [PATCH 10/13] add text description for slider component

---
 src/web/store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/store.js b/src/web/store.js
index 6dc18be5..0bbb9885 100644
--- a/src/web/store.js
+++ b/src/web/store.js
@@ -287,7 +287,7 @@ export default {
         title: "Slider",
         img: slider,
         path: "slider",
-        text: "slider",
+        text: "Sliders allow users to make selections from a range of values.",
         btn: "View slider",
       },
       {

From f6e364e91a04c67dac5ea2bc8fa3dfc640a91ae8 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Thu, 7 Sep 2023 15:03:43 +0200
Subject: [PATCH 11/13] fix BIMDataInput for 0 Number

---
 src/BIMDataComponents/BIMDataInput/BIMDataInput.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue b/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
index 1df5fdf2..04822185 100644
--- a/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
+++ b/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
@@ -1,7 +1,13 @@
 <template>
   <div
     class="bimdata-input"
-    :class="{ error, success, disabled, loading, 'not-empty': !!modelValue }"
+    :class="{
+      error,
+      success,
+      disabled,
+      loading,
+      'not-empty': modelValue != null,
+    }"
     :style="style"
   >
     <input
@@ -40,7 +46,7 @@ export default {
   },
   props: {
     modelValue: {
-      type: [String, Number, Boolean],
+      type: [String, Number],
       default: "",
     },
     placeholder: {

From 033487acf5bc489a719fa929076b743f86235517 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Fri, 8 Sep 2023 11:00:20 +0200
Subject: [PATCH 12/13] add tooltip documentation

---
 src/web/views/Components/Slider/props-data.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/web/views/Components/Slider/props-data.js b/src/web/views/Components/Slider/props-data.js
index 2a353ea3..96714079 100644
--- a/src/web/views/Components/Slider/props-data.js
+++ b/src/web/views/Components/Slider/props-data.js
@@ -48,4 +48,12 @@ export default [
     "Use this props to disable slider.",
     "true",
   ],
+  [
+    "tooltip",
+    "Boolean",
+    "",
+    "false",
+    "Use this props to enable tooltip with slider value.",
+    "true",
+  ],
 ];

From a7e9b46744075b048cc732277f53eecf600da6ed Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Fri, 8 Sep 2023 11:13:23 +0200
Subject: [PATCH 13/13] fix input modelValue

---
 src/web/views/Components/Slider/Slider.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/web/views/Components/Slider/Slider.vue b/src/web/views/Components/Slider/Slider.vue
index d9bfb11f..9d5f0c26 100644
--- a/src/web/views/Components/Slider/Slider.vue
+++ b/src/web/views/Components/Slider/Slider.vue
@@ -31,7 +31,8 @@
           <BIMDataInput
             type="number"
             placeholder="Slider default value"
-            v-model="slider"
+            :modelValue="slider"
+            @update:modelValue="slider = +$event"
           />
           <BIMDataInput type="number" placeholder="Step value" v-model="step" />
           <BIMDataCheckbox text="Tooltip" v-model="tooltip" />