Merge branch 'master' into eleanor-gptdraw

1 files changed, 168 insertions, 0 deletions

diff --git a/packages/components/src/components/Slider/Slider.scss b/packages/components/src/components/Slider/Slider.scss
new file mode 100644
index 000000000..9a9fc6172
--- /dev/null
+++ b/packages/components/src/components/Slider/Slider.scss
@@ -0,0 +1,168 @@
+@import '../../global/globalCssVariables.scss';
+
+.slider-container {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  min-width: 200px;
+  width: 100%;
+  height: 100%;
+  font-family: $default-font;
+
+  .selected-range {
+    width: 100%;
+    background: $medium-blue;
+  }
+
+  .range {
+    position: absolute;
+    background: $light-gray;
+  }
+
+  .box-minmax{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px;
+    color: $medium-blue;
+    position: absolute;
+    top: 110%;
+  }
+  .range-slider {
+    margin: 0px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+
+    .rs-label-container {
+      display: flex;
+      position: absolute;
+      justify-content: center;
+      align-items: center;
+      overflow: visible;
+      border-radius: $standard-border-radius;
+      z-index: 45;
+      pointer-events: none;
+
+      .rs-label {
+        display: flex;
+        font-size: smaller;
+        white-space: nowrap;
+        border-radius: 100%;
+        text-align: center;
+        text-wrap: wrap;
+        word-break: break-all;
+        justify-content: center;
+        align-items: center;
+        font-family: $default-font;
+        user-select: none;
+        pointer-events: none;
+        top: 0px;
+        width: fit-content;
+        border-radius: $standard-border-radius;
+        z-index: 40;
+      }
+
+    }
+  
+    .rs-range {
+      width: 100%;
+      position: relative;
+      background: transparent;
+      pointer-events: none;
+      -webkit-appearance: none;
+      margin: 0px;
+      z-index: 20;
+  
+      &:focus {
+        outline: none;
+      }
+  
+      &::-webkit-slider-runnable-track {
+          width: 100%;
+          background: none;
+          cursor: pointer;
+          box-shadow: none;
+          -webkit-appearance: none;
+          pointer-events: none;
+      }
+      &::-moz-range-track {
+          width: 100%;
+          cursor: pointer;
+          box-shadow: none;
+          -webkit-appearance: none;
+          pointer-events: none;
+      }
+    
+    &::-webkit-slider-thumb {
+          cursor: ew-resize;
+          -webkit-appearance: none;
+          pointer-events: auto;
+    }
+    &::-moz-range-thumb {
+          cursor: pointer;
+          -webkit-appearance: none;
+          pointer-events: auto;
+    }
+
+    &::-moz-focus-outer {
+      border: 0;
+    }
+
+    &.xsmall {
+    &::-webkit-slider-runnable-track {
+        height: $xsmall;
+      }
+
+      &::-webkit-slider-thumb {
+        height: $xsmall;
+        width: $xsmall;
+        border-radius: $xsmall;
+      }
+    }
+
+    &.small {
+      &::-webkit-slider-runnable-track {
+        height: $small;
+      }
+
+      &::-webkit-slider-thumb {
+        height: $small;
+        width: $small;
+        border-radius: $small;
+      }
+    }
+
+    &.medium {
+      &::-webkit-slider-runnable-track {
+        height: $medium;
+      }
+
+      &::-webkit-slider-thumb {
+        height: $medium;
+        width: $medium;
+        border-radius: $medium;
+      }
+    }
+
+    &.large {
+      &::-webkit-slider-runnable-track {
+        height: $large;
+      }
+
+      &::-webkit-slider-thumb {
+        height: $large;
+        width: $large;
+        border-radius: $large;
+      }
+    }
+  }
+  }
+  
+}
+
+
+