✨ Add disabled state to sliders

Author: Frontendland

README.md

@@ -132,6 +132,11 @@ html body {
     --w-scrollbar-bg: var(--w-color-primary-60);
     --w-scrollbar-fg: var(--w-color-primary-50);
 
+    // Slider component
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+
     // Spinner component
     --w-spinner-color: var(--w-color-primary);
     --w-spinner-width: 2px;

src/components/Slider/Slider.astro

@@ -11,6 +11,7 @@ const {
     max,
     value,
     step,
+    disabled,
     color,
     background,
     thumb,
@@ -36,6 +37,7 @@ const styleVariables = classNames([
     max={max}
     value={value || min}
     step={step}
+    disabled={disabled}
     class:list={classes}
     id={id}
     style={styleVariables}

src/components/Slider/Slider.svelte

@@ -8,6 +8,7 @@
     export let max: SvelteSliderProps['max'] = 100
     export let value: SvelteSliderProps['value'] = 0
     export let step: SvelteSliderProps['step'] = 1
+    export let disabled: SvelteSliderProps['disabled'] = false
     export let color: SvelteSliderProps['color'] = ''
     export let background: SvelteSliderProps['background'] = ''
     export let thumb: SvelteSliderProps['thumb'] = ''
@@ -33,8 +34,9 @@
     max={max}
     value={value || min}
     step={step}
+    disabled={disabled}
     class={classes}
-    id={id}
-    style={styleVariables}
+    id={id || null}
+    style={styleVariables || null}
     on:change={onChange}
 />

src/components/Slider/Slider.tsx

@@ -9,6 +9,7 @@ const Slider = ({
     max,
     value,
     step,
+    disabled,
     color,
     background,
     thumb,
@@ -34,6 +35,7 @@ const Slider = ({
             max={max}
             defaultValue={value || min}
             step={step}
+            disabled={disabled}
             className={classes}
             id={id}
             style={styleVariables}

src/components/Slider/slider.module.scss

@@ -16,6 +16,26 @@ body {
     -webkit-appearance: none;
     appearance: none;
     cursor: pointer;
+
+    &[disabled]::-webkit-slider-runnable-track {
+        @include background(primary-50);
+    }
+    
+    &[disabled]::-moz-range-track {
+        @include background(primary-50);
+    }
+
+    &[disabled]::-webkit-slider-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+
+    &[disabled]::-moz-range-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
 }
 
 .slider::-webkit-slider-runnable-track {
@@ -35,7 +55,7 @@ body {
 
     -webkit-appearance: none;
     appearance: none;
-    box-shadow: -405px 0 0 400px var(--w-slider-color);
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
 }
 
 .slider::-moz-range-thumb {
@@ -44,5 +64,5 @@ body {
     @include border-radius(max);
     @include border(var(--w-slider-color));
 
-    box-shadow: -405px 0 0 400px var(--w-slider-color);
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
 }

src/components/Slider/slider.ts

@@ -3,10 +3,11 @@ export type SliderProps = {
     max: number
     value?: number
     step?: number
-    id?: string
+    disabled?: boolean
     color?: string
     background?: string
     thumb?: string
+    id?: string
     className?: string
 }
 

src/pages/slider.astro

@@ -86,6 +86,15 @@ const sections = getSections({
                     className="labelled1"
                 />
             </ComponentWrapper>
+
+            <ComponentWrapper title="Disabled">
+                <section.component
+                    min={0}
+                    max={100}
+                    value={40}
+                    disabled={true}
+                />
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>
@@ -101,5 +110,4 @@ const sections = getSections({
     slider2?.addEventListener('change', (e: any) => {
         e.target.previousElementSibling.innerText = e.target.value
     })
-
 </script>