Slider and text input changes (#65)

lib/assets/styles/defaults.scss

@@ -99,7 +99,7 @@ input[type='number'] {
   position: relative;
 
   input {
-    padding-left: 2.25rem;
+    padding: 0 2.5rem;
     width: 100%;
   }
 
@@ -118,6 +118,19 @@ input[type='number'] {
     color: var(--color-base);
     opacity: 0.6;
   }
+
+  .btn {
+    @extend .transparent, .icon-only;
+
+    position: absolute;
+    right: 0.25rem;
+    z-index: 1;
+
+    svg {
+      position: relative;
+      left: 0;
+    }
+  }
 }
 
 svg {

lib/components/base/Slider.vue

@@ -22,12 +22,8 @@
           @input="onInput($refs.input.value)"
         />
         <div class="slider-range">
-          <span>
-            {{ min }}
-          </span>
-          <span>
-            {{ max }}
-          </span>
+          <span> {{ min }} {{ unit }} </span>
+          <span> {{ max }} {{ unit }} </span>
         </div>
       </div>
     </div>
@@ -72,6 +68,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  unit: {
+    type: String,
+    default: '',
+  },
 })
 
 let currentValue = ref(Math.max(props.min, props.modelValue).toString())
@@ -178,6 +178,7 @@ const onInput = (value) => {
 }
 
 .disabled {
-  filter: brightness(0.8);
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 </style>