diff --git a/src/ui/elements/slider.ts b/src/ui/elements/slider.ts
index 2c88729..5e2230c 100644
--- a/src/ui/elements/slider.ts
+++ b/src/ui/elements/slider.ts
@@ -19,6 +19,7 @@ export class SliderElement extends ConfigUIElement<number, HTMLDivElement> {
     private _dragging: boolean;
     private _hovering: boolean;
     private _internalValue: number;
+    private _small: boolean;
 
     public constructor() {
         super();
@@ -29,6 +30,7 @@ export class SliderElement extends ConfigUIElement<number, HTMLDivElement> {
         this._internalValue = 0.5;
         this._dragging = false;
         this._hovering = false;
+        this._small = false;
     }
 
     public override setDefaultValue(value: number) {
@@ -37,6 +39,11 @@ export class SliderElement extends ConfigUIElement<number, HTMLDivElement> {
         return this;
     }
 
+    public setSmall() {
+        this._small = true;
+        return this;
+    }
+
     /**
      * Set the minimum value the slider can be set to.
      */
@@ -123,12 +130,12 @@ export class SliderElement extends ConfigUIElement<number, HTMLDivElement> {
         });
     }
 
-    protected override _generateInnerHTML() {
+    public override _generateInnerHTML() {
         const norm = (this._internalValue - this._min) / (this._max - this._min);
 
         return `
-            <input class="slider-number-input" type="number" id="${this._getSliderValueId()}" min="${this._min}" max="${this._max}" step="${this._step}" value="${this.getValue().toFixed(this._decimals)}">
-            <div class="new-slider" id="${this._getId()}" style="flex-grow: 1;">
+            <input class="${this._small ? 'slider-height-small' : 'slider-height-normal'}" type="number" id="${this._getSliderValueId()}" min="${this._min}" max="${this._max}" step="${this._step}" value="${this.getValue().toFixed(this._decimals)}">
+            <div class="new-slider ${this._small ? 'slider-bar-height-small' : 'slider-bar-height-normal'} " id="${this._getId()}" style="flex-grow: 1;">
                 <div class="new-slider-bar" id="${this._getSliderBarId()}" style="width: ${norm * 100}%;">
                 </div>
             </div>
diff --git a/src/ui/elements/solid_material_element.ts b/src/ui/elements/solid_material_element.ts
index 39144ee..c269fea 100644
--- a/src/ui/elements/solid_material_element.ts
+++ b/src/ui/elements/solid_material_element.ts
@@ -4,11 +4,13 @@ import { getRandomID } from '../../util';
 import { UIUtil } from '../../util/ui_util';
 import { ConfigUIElement } from './config_element';
 import { MaterialTypeElement } from './material_type_element';
+import { SliderElement } from './slider';
 
 export class SolidMaterialElement extends ConfigUIElement<SolidMaterial, HTMLDivElement> {
     private _materialName: string;
     private _colourId: string;
     private _typeElement: MaterialTypeElement;
+    private _alphaElement: SliderElement;
 
     public constructor(materialName: string, material: SolidMaterial) {
         super(material);
@@ -16,15 +18,28 @@ export class SolidMaterialElement extends ConfigUIElement<SolidMaterial, HTMLDiv
         this._colourId = getRandomID();
 
         this._typeElement = new MaterialTypeElement(MaterialType.solid);
+
+        this._alphaElement = new SliderElement()
+            .setMin(0.0)
+            .setMax(1.0)
+            .setDefaultValue(material.colour.a)
+            .setDecimals(2)
+            .setStep(0.01)
+            .setSmall();
     }
 
     public override registerEvents(): void {
         this._typeElement.registerEvents();
+        this._alphaElement.registerEvents();
 
         this._typeElement.onClickChangeTypeDelegate(() => {
             this._onChangeTypeDelegate?.();
         });
 
+        this._alphaElement.addValueChangedListener((newAlpha) => {
+            this.getValue().colour.a = newAlpha;
+        });
+
         const swatchElement = UIUtil.getElementById(this._colourId) as HTMLInputElement;
         swatchElement.addEventListener('change', () => {
             const material = this.getValue();
@@ -51,7 +66,7 @@ export class SolidMaterialElement extends ConfigUIElement<SolidMaterial, HTMLDiv
 
         addSubproperty('Type', this._typeElement._generateInnerHTML());
         addSubproperty('Colour', `<input class="colour-swatch" type="color" id="${this._colourId}" value="${RGBAUtil.toHexString(material.colour)}">`);
-        addSubproperty('Alpha', `${material.colour.a.toFixed(4)}`);
+        addSubproperty('Alpha', this._alphaElement._generateInnerHTML());
 
         return `
             <div class="subproperty-container">
diff --git a/src/ui/elements/textured_material_element.ts b/src/ui/elements/textured_material_element.ts
index 39ff3a3..142f382 100644
--- a/src/ui/elements/textured_material_element.ts
+++ b/src/ui/elements/textured_material_element.ts
@@ -4,6 +4,7 @@ import { ComboBoxElement } from './combobox';
 import { ConfigUIElement } from './config_element';
 import { ImageElement } from './image_element';
 import { MaterialTypeElement } from './material_type_element';
+import { SliderElement } from './slider';
 
 export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, HTMLDivElement> {
     private _materialName: string;
@@ -12,6 +13,7 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
     private _wrapElement: ComboBoxElement<'clamp' | 'repeat'>;
     private _imageElement: ImageElement;
     private _typeElement: MaterialTypeElement;
+    private _alphaElement: SliderElement;
 
     public constructor(materialName: string, material: TexturedMaterial) {
         super(material);
@@ -33,6 +35,14 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
         this._imageElement = new ImageElement(material.path);
 
         this._typeElement = new MaterialTypeElement(MaterialType.textured);
+
+        this._alphaElement = new SliderElement()
+            .setMin(0.0)
+            .setMax(1.0)
+            .setDefaultValue(material.alphaFactor)
+            .setDecimals(2)
+            .setStep(0.01)
+            .setSmall();
     }
 
     public override registerEvents(): void {
@@ -40,6 +50,7 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
         this._typeElement.registerEvents();
         this._filteringElement.registerEvents();
         this._wrapElement.registerEvents();
+        this._alphaElement.registerEvents();
 
         this._imageElement.addValueChangedListener((newPath) => {
             const material = this.getValue();
@@ -59,6 +70,10 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
         this._typeElement.onClickChangeTypeDelegate(() => {
             this._onChangeTypeDelegate?.();
         });
+
+        this._alphaElement.addValueChangedListener((newAlpha) => {
+            this.getValue().alphaFactor = newAlpha;
+        });
     }
 
     protected override _generateInnerHTML(): string {
@@ -79,7 +94,7 @@ export class TexturedMaterialElement extends ConfigUIElement<TexturedMaterial, H
         };
 
         addSubproperty('Type', this._typeElement._generateInnerHTML());
-        addSubproperty('Alpha', material.alphaFactor.toFixed(4));
+        addSubproperty('Alpha', this._alphaElement._generateInnerHTML());
         addSubproperty('File', this._imageElement._generateInnerHTML());
         addSubproperty('Filtering', this._filteringElement._generateInnerHTML());
         addSubproperty('Wrap', this._wrapElement._generateInnerHTML());
diff --git a/styles.css b/styles.css
index 82ab038..4d076f7 100644
--- a/styles.css
+++ b/styles.css
@@ -174,10 +174,15 @@ canvas {
   overflow: hidden;
 }
 
-.slider-number-input {
+.slider-height-normal {
   height: calc(var(--property-height) - 4px);
 }
 
+.slider-height-small {
+  height: calc(var(--subproperty-height) - 4px);
+  font-size: 100%;
+}
+
 input {
   user-select: none;
   margin-right: 3px;
@@ -231,14 +236,22 @@ select:disabled {
   color: var(--text-disabled);
 }
 
+.slider-bar-height-normal {
+  height: calc(var(--property-height) - 2px);
+}
+
+.slider-bar-height-small {
+  height: calc(var(--subproperty-height) - 2px);
+}
+
 .new-slider {
   border-radius: var(--border-radius);
   font-family: 'Lexend', sans-serif;
   font-weight: 300;
   background: var(--prop-standard);
   cursor: ew-resize;
-  height: calc(var(--property-height) - 2px);
   border: 1px solid var(--prop-bg);
+  overflow: hidden;
 }
 .new-slider-hover {
   border: 1px solid rgba(255, 255, 255, 0.1) !important;