fix(Slider): add not-allowed cursor class for disabled state (#879)

Endava · Mar 4, 2024 · 6bd4bf6 · 6bd4bf6
1 parent ae2ff6d
commit 6bd4bf6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/beeq/src/components/slider/bq-slider.tsx b/packages/beeq/src/components/slider/bq-slider.tsx
@@ -290,7 +290,7 @@ export class BqSlider {
       <div
         class={{
           [`bq-slider ${this.type}`]: true,
-          'opacity-60': this.disabled,
+          'cursor-not-allowed opacity-60': this.disabled,
         }}
         part="base"
         aria-disabled={this.disabled ? 'true' : 'false'}

diff --git a/packages/beeq/src/components/slider/scss/bq-slider.scss b/packages/beeq/src/components/slider/scss/bq-slider.scss
@@ -67,6 +67,14 @@
   @apply thumb-active;
 }
 
+.bq-slider__input[disabled]::-webkit-slider-thumb {
+  @apply cursor-not-allowed;
+}
+
+.bq-slider__input[disabled]::-moz-range-thumb {
+  @apply cursor-not-allowed;
+}
+
 .progress {
   @apply absolute z-[var(--bq-slider--z-index-progress)] h-[var(--bq-slider--size)] rounded-[var(--bq-slider--border-radius)] bg-[var(--bq-slider--progress-color)];
 }