diff --git a/src/app/shared/components/slider-field/slider-field.html b/src/app/shared/components/slider-field/slider-field.html
index e15a618..490396b 100644
--- a/src/app/shared/components/slider-field/slider-field.html
+++ b/src/app/shared/components/slider-field/slider-field.html
@@ -1,13 +1,13 @@
-<div class="flex items-center gap-2.5 flex-wrap">
-  <span>{{ label() | translate }}</span>
-  <mat-slider [min]="min()" [max]="max()" [step]="step()" [discrete]="discrete()">
+<div class="slider-row">
+  <span class="slider-label">{{ label() | translate }}</span>
+  <mat-slider class="slider-track" [min]="min()" [max]="max()" [step]="step()" [discrete]="discrete()">
     <input matSliderThumb
            [attr.aria-label]="label() | translate"
            [ngModel]="value()"
            (ngModelChange)="value.set($event)"
            (valueChange)="onSliderRelease($event)">
   </mat-slider>
-  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="w-[110px]">
+  <mat-form-field appearance="outline" subscriptSizing="dynamic" class="slider-field">
     <input #field matInput type="number"
            [attr.aria-label]="label() | translate"
            [min]="min()" [max]="max()" [step]="step()"
diff --git a/src/app/shared/components/slider-field/slider-field.scss b/src/app/shared/components/slider-field/slider-field.scss
index 3d47c4b..598ae36 100644
--- a/src/app/shared/components/slider-field/slider-field.scss
+++ b/src/app/shared/components/slider-field/slider-field.scss
@@ -3,3 +3,40 @@
 :host {
   @include mat.form-field-density(-4);
 }
+
+.slider-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.slider-label {
+  flex: 0 0 15rem;
+}
+
+.slider-track {
+  flex: 0 0 12rem;
+  width: 12rem;
+  min-width: 0;
+  margin: 0;
+}
+
+.slider-field {
+  flex: 0 0 5.5rem;
+  width: 5.5rem;
+}
+
+@media (max-width: 639px) {
+  .slider-row {
+    flex-wrap: wrap;
+  }
+
+  .slider-label {
+    flex-basis: 100%;
+  }
+
+  .slider-track {
+    flex: 1 1 0;
+    width: auto;
+  }
+}