@bolttech/atoms-range-slider - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

package.json

 {
   "name": "@bolttech/atoms-range-slider",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "main": "./index.cjs",
@@ -9,3 +9,3 @@ "type": "commonjs",
     "@bolttech/default-theme": "0.8.0",
-    "@bolttech/frontend-foundations": "0.9.0",
+    "@bolttech/frontend-foundations": "0.9.4",
     "@bolttech/ui-utils": "0.4.0",
@@ -12,0 +12,0 @@ "react": "18.2.0",

src/lib/atoms-range-slider.d.ts

@@ -8,7 +8,8 @@ /// <reference types="react" />
     step?: number | undefined;
-    values: [number, number] | number[];
+    type?: "single" | "multi" | undefined;
+    values: number | [number, number] | number[];
     disabled?: boolean | undefined;
-    onChange?: ((values: [number, number]) => void) | undefined;
+    onChange?: ((values: number | [number, number]) => void) | undefined;
     formatText?: ((value: number) => string) | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default RangeSlider;

src/lib/atoms-range-slider.type.d.ts

@@ -9,2 +9,3 @@ import { DefaultProps } from '@bolttech/ui-utils';
  * @property {number | undefined} step - value representing how much value will increase the slider each move
+ * @property {string | undefined} type - type of the RangeSlider. If single provided you can only change 1 value. If multi, you can pick a range
  * @property {[number, number] | number[]} values - array representing the minimum and maximum selected values
@@ -30,4 +31,9 @@ * @property {boolean | undefined} disabled - a boolean representing if the RangeSlider will be disabled or not
     step?: number;
+    /** Type of the RangeSlider. If single provided you can only change 1 value. If multi, you can pick a range
+     *
+     *  Default value is `multi`
+     */
+    type?: 'single' | 'multi';
     /**
-     * Array with two values representing the minimum and maximum selected values
+     * Array with two values representing the minimum and maximum selected values, or a single value if you only want to select one value
      *
@@ -37,6 +43,9 @@ * @example
      * ```
-     * <RangeSlider value=[20,100] />
+     * <RangeSlider values={[20,100]} />
      * ```
+     * ```
+     * <RangeSlider values={10} />
+     * ```
      */
-    values: [number, number] | number[];
+    values: [number, number] | number[] | number;
     /** Boolean representing if the RangeSlider will be disabled or not
@@ -52,3 +61,3 @@ *
      * one representing the min value selected and the second one representing
-     * the max value selected
+     * the max value selected. It returns only one value if single provided
      *
@@ -61,3 +70,3 @@ * @example
      */
-    onChange?: (values: [number, number]) => void;
+    onChange?: (values: [number, number] | number) => void;
     /**
@@ -64,0 +73,0 @@ * Function that will run every time the value changes.

No alert changes

Improved metrics

Total package byte prevSize

174917

increased by0.27%

Lines of code

3138

increased by0.22%

Dependency changes

• Updated@bolttech/frontend-foundations@0.9.4