✨ Add name to RangeSlider

Author: Frontendland

src/components/RangeSlider/RangeSlider.astro

@@ -22,6 +22,7 @@ const {
     color,
     background,
     thumb,
+    name,
     label,
     subText,
     minLabel,
@@ -84,6 +85,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
             />
             <input
                 type="range"
+                name={name}
                 class:list={[styles.input, styles.min]}
                 min={min}
                 max={max}
@@ -94,6 +96,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
             />
             <input
                 type="range"
+                name={name}
                 min={min}
                 max={max}
                 class={styles.input}
@@ -189,6 +192,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
                 }
 
                 dispatch('rangeSliderOnChange', {
+                    name: target.name,
                     min: minValue,
                     max: maxValue
                 })
@@ -257,6 +261,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
             }
 
             dispatch('rangeSliderOnChange', {
+                name: minInput.name,
                 min: minValue,
                 max: maxValue
             })

src/components/RangeSlider/rangeslider.ts

@@ -16,6 +16,7 @@ export type RangeSliderProps = {
     color?: string
     background?: string
     thumb?: string
+    name?: string
     label?: string
     subText?: string
     minLabel?: string