diff --git a/packages/uui-slider/lib/uui-slider.element.ts b/packages/uui-slider/lib/uui-slider.element.ts
index 830be1b86..26875ada2 100644
--- a/packages/uui-slider/lib/uui-slider.element.ts
+++ b/packages/uui-slider/lib/uui-slider.element.ts
@@ -157,6 +157,15 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
   /**
    * Label to be used for aria-label and eventually as visual label
    * @type {string}
@@ -296,7 +305,8 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
         .value="${this.value}"
         aria-label="${this.label}"
         step="${+this.step}"
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled || this.readonly}
+        ?readonly=${this.readonly}
         @input=${this._onInput}
         @change=${this._onChange} />
       <div id="track" aria-hidden="true">
@@ -362,6 +372,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
       .track-step {
         fill: var(--uui-color-border);
       }
+
       input:hover ~ #track svg .track-step {
         fill: var(--uui-color-border-emphasis);
       }
@@ -402,6 +413,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
         border-radius: 50%;
         background-color: var(--uui-color-selected);
       }
+
       :host([disabled]) #thumb:after {
         background-color: var(--uui-color-disabled);
       }
@@ -457,6 +469,16 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
       :host(:not([pristine]):invalid) #thumb:after {
         background-color: var(--uui-color-danger);
       }
+
+      // readonly
+      :host([readonly]) #thumb {
+        background-color: var(--uui-color-disabled);
+        border-color: var(--uui-color-disabled-standalone);
+      }
+
+      :host([readonly]) #thumb-label {
+        opacity: 1;
+      }
     `,
   ];
 }
diff --git a/packages/uui-slider/lib/uui-slider.story.ts b/packages/uui-slider/lib/uui-slider.story.ts
index 0e296b7a9..eac712fc9 100644
--- a/packages/uui-slider/lib/uui-slider.story.ts
+++ b/packages/uui-slider/lib/uui-slider.story.ts
@@ -17,6 +17,7 @@ export default {
     hideValueLabel: false,
     value: 0,
     disabled: false,
+    readonly: false,
   },
   argTypes: {
     label: {
@@ -38,6 +39,7 @@ const Template: Story = props => html`
     min=${props.min}
     max=${props.max}
     ?disabled=${props.disabled}
+    ?readonly=${props.readonly}
     .value=${props.value}
     .hideStepValues=${props.hideStepValues}
     .hideValueLabel=${props.hideValueLabel}></uui-slider>
@@ -72,3 +74,8 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
 };
+
+export const Readonly = Template.bind({});
+Readonly.args = {
+  readonly: true,
+};