diff --git a/css/mistica-common.css b/css/mistica-common.css
index e15cde9964..b1c9870767 100644
--- a/css/mistica-common.css
+++ b/css/mistica-common.css
@@ -44,6 +44,8 @@
     --vcolor-checkbox-tick: var(--mistica-color-controlKnobInverse);
     --vcolor-checkbox-background: transparent;
 
+    --vcolor-barTrack: var(--mistica-color-barTrackInverse);
+
     --vcolor-switch-trackBackground: transparent;
     --vcolor-switch-handleChecked: var(--mistica-color-controlKnobInverse);
     --vcolor-switch-handleHover: var(--mistica-color-inverse);
@@ -97,6 +99,8 @@
     --vcolor-checkbox-tick: var(--mistica-color-inverse);
     --vcolor-checkbox-background: var(--mistica-color-background);
 
+    --vcolor-barTrack: var(--mistica-color-barTrack);
+
     --vcolor-switch-trackBackground: var(--mistica-color-backgroundAlternative);
     --vcolor-switch-handleChecked: var(--mistica-color-inverse);
     --vcolor-switch-handleHover: var(--mistica-color-neutralHigh);
@@ -209,6 +213,7 @@
     font-size: var(--mistica-font-size-link);
     line-height: var(--mistica-line-height-link);
     font-weight: var(--mistica-font-weight-link);
+    -webkit-tap-highlight-color: transparent;
 }
 .mistica-text-title1 {
     color: var(--vcolor-textSecondary);
@@ -302,6 +307,7 @@
     align-items: center;
     justify-content: center;
     text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
 }
 label.mistica-chip {
     padding: 0;
@@ -348,13 +354,15 @@ label.mistica-chip > span:before {
     width: 100%;
     height: 100%;
     background: transparent;
-    transition: background-color 0.1s ease-in-out;
+    /* transition: background-color 0.1s ease-in-out; */
 }
 
-button.mistica-chip:hover:before,
-a.mistica-chip:hover:before,
-label.mistica-chip > input:hover + span:before {
-    background: var(--mistica-color-backgroundContainerHover);
+@media (pointer: fine) {
+    button.mistica-chip:hover:before,
+    a.mistica-chip:hover:before,
+    label.mistica-chip > input:hover + span:before {
+        background: var(--mistica-color-backgroundContainerHover);
+    }
 }
 
 button.mistica-chip:active:before,
@@ -391,6 +399,7 @@ label.mistica-chip > input:checked + span {
     color: inherit;
     font: inherit;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
     padding: 0;
     margin: 0;
     min-width: 24px;
@@ -459,10 +468,13 @@ label.mistica-chip > input:checked + span {
     line-height: inherit;
     font-family: inherit;
     text-decoration: underline;
+    -webkit-tap-highlight-color: transparent;
 }
 
-.mistica-text-link:hover:not([disabled]) {
-    text-decoration-thickness: 0.125em;
+@media (pointer: fine) {
+    .mistica-text-link:hover:not([disabled]) {
+        text-decoration-thickness: 0.125em;
+    }
 }
 
 .mistica-text-link[disabled] {
@@ -488,6 +500,7 @@ label.mistica-chip > input:checked + span {
     line-height: var(--mistica-line-height-1);
     font-weight: var(--mistica-font-weight-1);
     color: var(--vcolor-textPrimary);
+    -webkit-tap-highlight-color: transparent;
 }
 
 .mistica-breadcrumb li + li::before {
@@ -499,8 +512,10 @@ label.mistica-chip > input:checked + span {
     content: '';
 }
 
-.mistica-breadcrumb a:hover {
-    text-decoration-thickness: 0.125rem;
+@media (pointer: fine) {
+    .mistica-breadcrumb a:hover {
+        text-decoration-thickness: 0.125rem;
+    }
 }
 
 .mistica-breadcrumb li:last-of-type a {
@@ -531,7 +546,7 @@ label.mistica-chip > input:checked + span {
     text-align: center;
     text-decoration: none;
     display: inline-block;
-    --webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
     transition:
         background-color 0.1s ease-in-out,
         color 0.1s ease-in-out,
@@ -552,8 +567,10 @@ label.mistica-chip > input:checked + span {
     background: var(--vcolor-buttonPrimaryBackground);
 }
 
-[class^='mistica-button-primary']:hover {
-    background: var(--vcolor-buttonPrimaryBackgroundHover);
+@media (pointer: fine) {
+    [class^='mistica-button-primary']:hover {
+        background: var(--vcolor-buttonPrimaryBackgroundHover);
+    }
 }
 
 [class^='mistica-button-primary']:active {
@@ -566,8 +583,10 @@ label.mistica-chip > input:checked + span {
     border-color: var(--vcolor-buttonSecondaryBorder);
 }
 
-[class^='mistica-button-secondary']:hover {
-    background: var(--vcolor-buttonSecondaryBackgroundHover);
+@media (pointer: fine) {
+    [class^='mistica-button-secondary']:hover {
+        background: var(--vcolor-buttonSecondaryBackgroundHover);
+    }
 }
 
 [class^='mistica-button-secondary']:active {
@@ -579,8 +598,10 @@ label.mistica-chip > input:checked + span {
     background: var(--mistica-color-buttonDangerBackground);
 }
 
-[class^='mistica-button-danger']:hover {
-    background: var(--mistica-color-buttonDangerBackgroundHover);
+@media (pointer: fine) {
+    [class^='mistica-button-danger']:hover {
+        background: var(--mistica-color-buttonDangerBackgroundHover);
+    }
 }
 
 [class^='mistica-button-danger']:active {
@@ -591,9 +612,10 @@ label.mistica-chip > input:checked + span {
     color: var(--vcolor-textLink);
     background: transparent;
 }
-
-[class^='mistica-button-link']:hover {
-    background: var(--vcolor-buttonLinkBackgroundPressed);
+@media (pointer: fine) {
+    [class^='mistica-button-link']:hover {
+        background: var(--vcolor-buttonLinkBackgroundPressed);
+    }
 }
 
 [class^='mistica-button-link']:active {
@@ -625,6 +647,7 @@ label.mistica-chip > input:checked + span {
     height: auto;
     transition: background 0.1s ease-in-out;
     isolation: isolate;
+    -webkit-tap-highlight-color: transparent;
 }
 
 @media (min-width: 1024px) {
@@ -656,13 +679,15 @@ label.mistica-chip > input:checked + span {
     z-index: 1;
 }
 
-a.mistica-card:hover:after,
-a.mistica-snap-card:hover:after,
-a.mistica-display-card:hover:after,
-button.mistica-card:hover:after,
-button.mistica-snap-card:hover:after,
-button.mistica-display-card:hover:after {
-    background: var(--mistica-color-backgroundContainerHover);
+@media (pointer: fine) {
+    a.mistica-card:hover:after,
+    a.mistica-snap-card:hover:after,
+    a.mistica-display-card:hover:after,
+    button.mistica-card:hover:after,
+    button.mistica-snap-card:hover:after,
+    button.mistica-display-card:hover:after {
+        background: var(--mistica-color-backgroundContainerHover);
+    }
 }
 
 a.mistica-card:active:after,
@@ -677,6 +702,7 @@ button.mistica-display-card:active:after {
 .mistica-naked-card,
 .mistica-small-naked-card {
     text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .mistica-naked-card > *,
@@ -686,11 +712,13 @@ button.mistica-display-card:active:after {
         filter 0.1s ease-in-out;
 }
 
-a.mistica-naked-card:hover > *,
-button.mistica-naked-card:hover > *,
-a.mistica-small-naked-card:hover > *,
-button.mistica-small-naked-card:hover > * {
-    opacity: 0.8;
+@media (pointer: fine) {
+    a.mistica-naked-card:hover > *,
+    button.mistica-naked-card:hover > *,
+    a.mistica-small-naked-card:hover > *,
+    button.mistica-small-naked-card:hover > * {
+        opacity: 0.8;
+    }
 }
 
 a.mistica-naked-card:active > *,
@@ -700,12 +728,14 @@ button.mistica-small-naked-card:active > * {
     opacity: 0.6;
 }
 
-a.mistica-naked-card:hover > .mistica-card__media,
-button.mistica-naked-card:hover > .mistica-card__media,
-a.mistica-small-naked-card:hover > .mistica-card__media,
-button.mistica-small-naked-card:hover > .mistica-card__media {
-    opacity: 1;
-    filter: brightness(75%);
+@media (pointer: fine) {
+    a.mistica-naked-card:hover > .mistica-card__media,
+    button.mistica-naked-card:hover > .mistica-card__media,
+    a.mistica-small-naked-card:hover > .mistica-card__media,
+    button.mistica-small-naked-card:hover > .mistica-card__media {
+        opacity: 1;
+        filter: brightness(75%);
+    }
 }
 
 a.mistica-naked-card:active > .mistica-card__media,
@@ -811,9 +841,11 @@ button.mistica-small-naked-card:active > .mistica-card__media {
     background: var(--mistica-color-cardContentOverlay);
 }
 
-a.mistica-display-card:has(.mistica-card__media):hover:after,
-button.mistica-display-card:has(.mistica-card__media):hover:after {
-    background: var(--mistica-color-cardContentOverlay) var(--mistica-color-backgroundContainerHover);
+@media (pointer: fine) {
+    a.mistica-display-card:has(.mistica-card__media):hover:after,
+    button.mistica-display-card:has(.mistica-card__media):hover:after {
+        background: var(--mistica-color-cardContentOverlay) var(--mistica-color-backgroundContainerHover);
+    }
 }
 
 a.mistica-display-card:has(.mistica-card__media):active:after,
@@ -937,6 +969,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     padding: 16px;
     margin: 0 -16px;
     transition: background-color 0.1s ease-in-out;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .mistica-accordion-item__summary::-webkit-details-marker {
@@ -975,8 +1008,10 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     color: var(--vcolor-accordionChevronOpen);
 }
 
-.mistica-accordion-item__summary:hover {
-    background-color: var(--vcolor-accordionHover);
+@media (pointer: fine) {
+    .mistica-accordion-item__summary:hover {
+        background-color: var(--vcolor-accordionHover);
+    }
 }
 
 .mistica-accordion-item__summary:active {
@@ -1227,6 +1262,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     margin: 0;
     box-sizing: border-box;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
     transition:
         background-color var(--switch-transition),
         border-color var(--switch-transition);
@@ -1247,8 +1283,10 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
         background-color var(--switch-transition);
 }
 
-.mistica-switch:hover:after {
-    background-color: var(--vcolor-switch-handleHover);
+@media (pointer: fine) {
+    .mistica-switch:hover:after {
+        background-color: var(--vcolor-switch-handleHover);
+    }
 }
 
 .mistica-switch:checked {
@@ -1286,8 +1324,10 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     transform: translateX(20px);
 }
 
-.mistica-switch:hover:before {
-    background-color: var(--mistica-color-backgroundContainerHover);
+@media (pointer: fine) {
+    .mistica-switch:hover:before {
+        background-color: var(--mistica-color-backgroundContainerHover);
+    }
 }
 
 .mistica-switch:active:before {
@@ -1311,6 +1351,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     background: var(--vcolor-checkbox-background);
     box-shadow: inset 0 0 0 2px var(--vcolor-control);
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
     transition: box-shadow 0.3s;
 }
 
@@ -1351,6 +1392,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     line-height: var(--mistica-line-height-3);
     font-weight: var(--mistica-font-weight-3);
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .mistica-checkbox-label:has(.mistica-checkbox:disabled) {
@@ -1362,6 +1404,100 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     opacity: initial; /* avoid applying 0.5 opacity twice */
 }
 
+/* Slider */
+.mistica-slider {
+    --slider-thumb-position: 50%;
+    isolation: isolate;
+    position: relative;
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+    height: 20px;
+    outline: none;
+    margin: 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.mistica-slider::-webkit-slider-thumb {
+    position: relative;
+    z-index: 1;
+    appearance: none;
+    background: var(--vcolor-controlActivated);
+    width: 20px;
+    height: 20px;
+    cursor: grab;
+    border-radius: 50%;
+    transition: box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+    box-shadow: none;
+}
+
+.mistica-slider::-moz-range-thumb {
+    position: relative;
+    z-index: 1;
+    background: var(--vcolor-controlActivated);
+    width: 20px;
+    height: 20px;
+    cursor: grab;
+    border-radius: 50%;
+    transition: box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+    border: none; /*Removes extra border that FF applies*/
+}
+
+@media (pointer: fine) {
+    .mistica-slider::-webkit-slider-thumb:hover {
+        box-shadow: 0 0 0 4px rgba(from var(--vcolor-controlActivated) r g b / 0.2);
+    }
+    .mistica-slider::-moz-range-thumb:hover {
+        box-shadow: 0 0 0 4px rgba(from var(--vcolor-controlActivated) r g b / 0.2);
+    }
+}
+
+.mistica-slider:active::-webkit-slider-thumb,
+.mistica-slider:focus-visible::-webkit-slider-thumb {
+    cursor: grabbing;
+    box-shadow: 0 0 0 8px rgba(from var(--vcolor-controlActivated) r g b / 0.2);
+}
+
+.mistica-slider:active::-moz-range-thumb,
+.mistica-slider:focus-visible::-moz-range-thumb {
+    cursor: grabbing;
+    box-shadow: 0 0 0 8px rgba(from var(--vcolor-controlActivated) r g b / 0.2);
+}
+
+.mistica-slider::before {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    margin-top: -2px;
+    border-radius: var(--mistica-border-radius-bar);
+    background: linear-gradient(
+        to right,
+        var(--vcolor-controlActivated) var(--slider-thumb-position),
+        var(--vcolor-barTrack) var(--slider-thumb-position)
+    );
+}
+
+.mistica-slider::-moz-range-track {
+    position: absolute;
+    z-index: 0;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    margin-top: -2px;
+    border-radius: var(--mistica-border-radius-bar);
+    background: linear-gradient(
+        to right,
+        var(--vcolor-controlActivated) var(--slider-thumb-position),
+        var(--vcolor-barTrack) var(--slider-thumb-position)
+    );
+}
+
 /* FeedbackScreen */
 
 @keyframes mistica-animation-shake {
diff --git a/examples/css/index.html b/examples/css/index.html
index de6b8a903e..15d1895db5 100644
--- a/examples/css/index.html
+++ b/examples/css/index.html
@@ -122,6 +122,23 @@ <h4 class="mistica-text-title1">SearchField</h4>
                     <label for="search-field-1">Search</label>
                 </div>
 
+                <h3 class="mistica-text-title2">Slider</h3>
+                <input type="range" class="mistica-slider" min="0" max="10" value="2" step="1" />
+                <script>
+                    function setSliderThumbPosition(slider) {
+                        slider.style.setProperty(
+                            '--slider-thumb-position',
+                            `${((slider.value - slider.min) / (slider.max - slider.min)) * 100}%`
+                        );
+                    }
+                    document.querySelectorAll('.mistica-slider').forEach((slider) => {
+                        setSliderThumbPosition(slider);
+                        slider.addEventListener('input', () => {
+                            setSliderThumbPosition(slider);
+                        });
+                    });
+                </script>
+
                 <h3 class="mistica-text-title2">Switch</h3>
                 <input type="checkbox" class="mistica-switch" />
 
diff --git a/examples/css/main.js b/examples/css/main.js
index 5da10e7393..940f589e55 100644
--- a/examples/css/main.js
+++ b/examples/css/main.js
@@ -12,3 +12,6 @@ document.querySelector('#variant-select').addEventListener('change', (e) => {
     const newVariant = e.target.value;
     document.getElementById('app').dataset.misticaVariant = newVariant;
 });
+
+// hack to make css :active pseudo-class work on mobile
+document.addEventListener('touchstart', function () {}, false);