feat(ui): update volume controller style

Update style for >700px width devices, and add diferent style for <700px width devices.
mateusfg7 · Dec 8, 2021 · 643665e · 643665e
1 parent 252c1fd
commit 643665e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/src/components/VolumeController/index.tsx b/src/components/VolumeController/index.tsx
@@ -33,6 +33,7 @@ export const VolumeController: React.FC<IVolumeController> = ({
       min="1"
       max="1000"
       value={rangeValue}
+      percentValue={(rangeValue * 100) / 1000}
       onChange={event => {
         setRangeValue(Number(event.target.value))
         const decimalValue = Number(event.target.value) / 1000

diff --git a/src/components/VolumeController/styles.ts b/src/components/VolumeController/styles.ts
@@ -1,23 +1,29 @@
 import styled from 'styled-components'
 
-const VolumeControllerInput = styled.input`
+interface Props {
+  percentValue: number
+}
+
+const VolumeControllerInput = styled.input<Props>`
   opacity: 0;
 
   appearance: none;
 
   width: 100%;
-  height: 2px;
+  height: 4px;
 
   background: rgba(255, 255, 255, 1);
 
+  border-radius: 13px;
+
   cursor: pointer;
 
   /* MARKER */
   /* Chrome/Safari/Opera */
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    height: 13px;
-    width: 13px;
+    height: 15px;
+    width: 15px;
 
     background: rgba(255, 255, 255, 1);
 
@@ -50,6 +56,35 @@ const VolumeControllerInput = styled.input`
   &.selected {
     opacity: 1;
   }
+
+  @media (max-width: 700px) {
+    height: max-content;
+
+    background: rgba(255, 255, 255, 0.3);
+
+    background-image: linear-gradient(#fff, #fff);
+    background-size: ${props => props.percentValue + 3}%;
+    background-repeat: no-repeat;
+
+    /* MARKER */
+    /* Chrome/Safari/Opera */
+    &::-webkit-slider-thumb {
+      opacity: 0;
+      height: 15px;
+    }
+
+    /* Firefox */
+    &::-moz-range-thumb {
+      opacity: 0;
+      height: 15px;
+    }
+
+    /* IE */
+    &::-ms-thumb {
+      opacity: 0;
+      height: 15px;
+    }
+  }
 `
 
 export default VolumeControllerInput