Disabling sliders (#51)

* Add disabled slider to omorphia

* lint

docs/components/slider.md

@@ -4,10 +4,12 @@
 import { ref } from "vue"; 
 
 const value = ref(0)
+const valueTwo = ref(0)
 </script>
 
 <DemoContainer>
   <Slider v-model="value" :min="1000" :max="10000" :step="1000"/>
+  <Slider v-model="valueTwo" :min="1000" :max="10000" :step="1000" :disabled="true"/>
 </DemoContainer>
 
 ```vue

lib/components/base/Checkbox.vue

@@ -86,6 +86,7 @@ export default defineComponent({
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  outline: none;
 
   min-width: 1rem;
   min-height: 1rem;

lib/components/base/Slider.vue

@@ -10,6 +10,10 @@
           :max="max"
           :step="step"
           class="slider"
+          :class="{
+            disabled: disabled,
+          }"
+          :disabled="disabled"
           :style="{
             '--current-value': currentValue,
             '--min-value': min,
@@ -32,6 +36,7 @@
       :value="currentValue"
       type="text"
       class="slider-input"
+      :disabled="disabled"
       @change="onInput($refs.value.value)"
     />
   </div>
@@ -63,12 +68,17 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 let currentValue = ref(Math.max(props.min, props.modelValue).toString())
 
 const inputValueValid = (newValue) => {
   const parsedValue = parseInt(newValue)
+
   if (parsedValue < props.min) {
     currentValue.value = props.min.toString()
   } else if (parsedValue > props.max) {
@@ -142,13 +152,13 @@ const onInput = (value) => {
   transition: 0.2s;
 }
 
-.slider-component .slide-container .slider:hover::-webkit-slider-thumb {
+.slider-component .slide-container .slider:hover::-webkit-slider-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
   transition: 0.2s;
 }
 
-.slider-component .slide-container .slider:hover::-moz-range-thumb {
+.slider-component .slide-container .slider:hover::-moz-range-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
   transition: 0.2s;
@@ -166,4 +176,8 @@ const onInput = (value) => {
   font-size: 0.75rem;
   margin: 0;
 }
+
+.disabled {
+  filter: brightness(0.8);
+}
 </style>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "files": [
     "dist"
   ],