Use media for Slider

modrinth · Nov 9, 2023 · ae5139f · ae5139f
1 parent 418de2b
commit ae5139f
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/lib/components/base/Slider.vue b/lib/components/base/Slider.vue
@@ -132,6 +132,12 @@ const onInput = (value) => {
 
 <style lang="scss" scoped>
 .root-container {
+  --transition-speed: 0.2s;
+
+  @media (prefers-reduced-motion) {
+    --transition-speed: 0s;
+  }
+
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -176,7 +182,7 @@ const onInput = (value) => {
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider::-moz-range-thumb {
@@ -186,19 +192,19 @@ const onInput = (value) => {
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider:hover::-webkit-slider-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider:hover::-moz-range-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .snap-points-wrapper {