✨ Make min/max optional for Slider

Author: Frontendland

src/components/Slider/Slider.astro

@@ -8,9 +8,9 @@ import styles from './slider.module.scss'
 interface Props extends SliderProps {}
 
 const {
-    min,
-    max,
-    value,
+    min = 0,
+    max = 100,
+    value = 0,
     step,
     disabled,
     color,

src/components/Slider/Slider.svelte

@@ -6,9 +6,9 @@
     import styles from './slider.module.scss'
 
     const {
-        min,
-        max,
-        value,
+        min = 0,
+        max = 100,
+        value = 0,
         step,
         disabled,
         color,

src/components/Slider/Slider.tsx

@@ -6,9 +6,9 @@ import { classNames } from '../../utils/classNames'
 import styles from './slider.module.scss'
 
 const Slider = ({
-    min,
-    max,
-    value,
+    min = 0,
+    max = 100,
+    value = 0,
     step,
     disabled,
     color,

src/components/Slider/slider.ts

@@ -1,8 +1,8 @@
 import type { InputTarget } from '../Input/input'
 
 export type SliderProps = {
-    min: number
-    max: number
+    min?: number
+    max?: number
     value?: number
     step?: number
     disabled?: boolean

src/pages/components/slider.astro

@@ -19,15 +19,15 @@ const sections = getSections({
     <h1>Slider</h1>
     <div class="grid md-2 lg-3">
         <ComponentWrapper type="Astro">
-            <AstroSlider min={0} max={100} value={50} />
+            <AstroSlider value={50} />
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
-            <SvelteSlider min={0} max={100} value={50} />
+            <SvelteSlider value={50} />
         </ComponentWrapper>
 
         <ComponentWrapper type="React">
-            <ReactSlider min={0} max={100} value={50} />
+            <ReactSlider value={50} />
         </ComponentWrapper>
     </div>
 
@@ -38,26 +38,22 @@ const sections = getSections({
         </Fragment>
         <div class="grid md-2 lg-3">
             <ComponentWrapper title="Default with no value">
-                <section.component min={0} max={100} />
+                <section.component />
             </ComponentWrapper>
 
             <ComponentWrapper title="With default value">
-                <section.component min={0} max={100} value={33} />
+                <section.component value={33} />
             </ComponentWrapper>
 
             <ComponentWrapper title="With steps">
                 <section.component
-                    min={0}
-                    max={100}
                     step={20}
                     value={20}
                 />
             </ComponentWrapper>
 
             <ComponentWrapper title="With custom colors">
                 <section.component
-                    min={0}
-                    max={100}
                     value={50}
                     color="var(--w-color-success)"
                     background="var(--w-color-primary-60)"
@@ -68,8 +64,6 @@ const sections = getSections({
             <ComponentWrapper title="With label">
                 <div class="flex items-center xs">
                     <section.component
-                        min={0}
-                        max={100}
                         value={20}
                         className="labelled"
                     />
@@ -80,21 +74,29 @@ const sections = getSections({
             <ComponentWrapper title="With label on top">
                 <span class="muted">40</span>
                 <section.component
-                    min={0}
-                    max={100}
                     value={40}
                     className="labelled1"
                 />
             </ComponentWrapper>
 
             <ComponentWrapper title="Disabled">
                 <section.component
-                    min={0}
-                    max={100}
                     value={40}
                     disabled={true}
                 />
             </ComponentWrapper>
+
+            <ComponentWrapper title="With custom min/max">
+                <div class="flex items-center xs">
+                    <section.component
+                        min={-100}
+                        max={500}
+                        value={-50}
+                        className="labelled2"
+                    />
+                    <span class="muted">-50</span>
+                </div>
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>
@@ -105,6 +107,7 @@ const sections = getSections({
     on(document, 'astro:page-load', () => {
         const slider1 = document.querySelector('.labelled')
         const slider2 = document.querySelector('.labelled1')
+        const slider3 = document.querySelector('.labelled2')
 
         slider1?.addEventListener('change', (e: any) => {
             e.target.nextElementSibling.innerText = e.target.value
@@ -113,5 +116,9 @@ const sections = getSections({
         slider2?.addEventListener('change', (e: any) => {
             e.target.previousElementSibling.innerText = e.target.value
         })
+
+        slider3?.addEventListener('change', (e: any) => {
+            e.target.nextElementSibling.innerText = e.target.value
+        })
     })
 </script>

src/pages/index.astro

@@ -320,7 +320,7 @@ import {
             <Skeleton height={15} />
         </CardWrapper>
         <CardWrapper title="Slider" href="/components/slider">
-            <Slider min={0} max={100} value={50} />
+            <Slider value={50} />
         </CardWrapper>
         <CardWrapper title="Speed Dial" href="/components/speed-dial">
             <SpeedDial

src/playground/ReactPlayground.tsx

@@ -318,8 +318,6 @@ const ReactPlayground = () => {
 
             <Card title="Slider">
                 <Slider
-                    min={0}
-                    max={100}
                     value={slider}
                     onChange={e => setSlider(Number(e.target.value))}
                     className={styles.mt}

src/playground/SveltePlayground.svelte

@@ -318,8 +318,6 @@
 
     <Card title="Slider">
         <Slider
-            min={0}
-            max={100}
             value={slider}
             onChange={e => slider = Number(e.currentTarget.value)}
             className={styles.mt}