Added id and className properties

Author: Genarito

src/components/MultiRangeSlider.tsx

@@ -41,7 +41,9 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
     disabled = false,
     inverted = false,
     color = 'green',
-    style
+    style,
+    id,
+    className = ''
   } = props
 
   /**
@@ -88,7 +90,7 @@ const MultiRangeSlider = function (props: MultiRangeSliderProps) {
   const disabledClass = disabled ? 'disabled' : ''
 
   return (
-    <div className='slider-parent' style={style}>
+    <div id={id} className={`slider-parent ${className}`} style={style}>
       <input
         type="range"
         min={defaultMinValue}

src/components/SingleRangeSlider.tsx

@@ -35,6 +35,8 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
     disabled = false,
     inverted = false,
     style,
+    id,
+    className = '',
     onChange
   } = props
 
@@ -72,7 +74,7 @@ const SingleRangeSlider = function (props: SingleRangeSliderProps) {
   const disabledClass = disabled ? 'disabled' : ''
 
   return (
-    <div className='slider-parent' style={style}>
+    <div id={id} className={`slider-parent ${className}`} style={style}>
       <input
         type="range"
         min={defaultMinValue}

src/types.ts

@@ -30,8 +30,12 @@ interface SliderProps {
     disabled?: boolean;
     /** A slider can have its colors inverted for contrast on a dark background. Default to `false`. */
     inverted?: boolean;
-    /** Component custom styles. */
+    /** Custom styles to assign to slider container. */
     style?: CSSProperties;
+    /** ID to assign to slider container. */
+    id?: string;
+    /** CSS class to assign to slider container. */
+    className?: string;
 }
 
 export type { RangeColor, SliderProps }