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

Comparing version 0.11.0 to 0.12.0

package.json

 {
   "name": "@bolttech/atoms-range-slider",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "main": "./index.cjs",
@@ -8,3 +8,3 @@ "type": "commonjs",
   "dependencies": {
-    "@edirect/frontend-foundations": "0.0.58",
+    "@edirect/frontend-foundations": "0.0.67",
     "react": "18.2.0",
@@ -11,0 +11,0 @@ "styled-components": "5.3.6"

README.md

@@ -1,8 +0,98 @@
-# atoms-range-slider
+# RangeSlider Component
 
-This library was generated with [Nx](https://nx.dev).
+The **RangeSlider** component is a React component designed to provide a range slider input element with customizable options such as minimum, maximum, step, and value range. This component is a part of the project's UI module and is intended to offer a user-friendly way to select a range of values within specified bounds.
 
-## Running unit tests
+## Table of Contents
 
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+- [Example](#example)
+- [Contributing](#contributing)
 
-Run `nx test atoms-range-slider` to execute the unit tests via [Jest](https://jestjs.io).
+## Installation
+
+To use the **RangeSlider** component in your React application, you need to follow these steps:
+
+### Using npm
+
+```bash
+npm install @edirect/frontend-foundations @bolttech/atoms-range-slider
+```
+
+### Using Yarn
+
+```bash
+yarn add @edirect/frontend-foundations @bolttech/atoms-range-slider
+```
+
+Once you have the required dependencies installed, you can start using the `RangeSlider` component in your React application.
+
+## Usage
+
+The **RangeSlider** component provides a range slider input element along with the ability to customize its appearance and behavior using various props.
+
+To use the component, import it and include it in your JSX:
+
+```jsx
+import React from 'react';
+import {RangeSlider} from '@bolttech/atoms-range-slider';
+import {bolttechTheme, BolttechThemeProvider} from "@edirect/frontend-foundations";
+
+function App() {
+  return (
+    <BolttechThemeProvider theme={bolttechTheme}>
+      <RangeSlider
+        id="range-slider-1"
+        dataTestId="range-slider-1"
+        min={0}
+        max={100}
+        values={[20, 80]}
+        step={5}
+        onChange={(values) => console.log('Selected values:', values)}
+      />
+    </BolttechThemeProvider>
+  );
+}
+
+export default App;
+```
+
+## Props
+
+The **RangeSlider** component accepts the following props:
+
+| Prop             | Type          | Description                                               |
+|------------------|---------------|-----------------------------------------------------------|
+| `id`             | string        | The ID attribute for the range slider container.          |
+| `dataTestId`     | string        | The data-testid attribute for testing purposes.           |
+| `min`            | number        | The minimum value of the range slider.                    |
+| `max`            | number        | The maximum value of the range slider.                    |
+| `values`         | number[]      | An array containing the current selected values.          |
+| `step`           | number        | The step interval between selectable values.              |
+| `disabled`       | boolean       | Whether the range slider is disabled.                     |
+| `onChange`       | function      | A callback function triggered when values change.         |
+| `formatText`     | function      | A function to format the displayed value text.            |
+
+## Example
+
+Here's an example of using the **RangeSlider** component:
+
+```jsx
+<RangeSlider
+  id="slider-1"
+  dataTestId="slider-1"
+  min={0}
+  max={100}
+  values={[25, 75]}
+  step={10}
+  onChange={(values) => console.log('Selected values:', values)}
+  formatText={(value) => `${value}%`}
+/>
+```
+
+This will render a **RangeSlider** component with a range from 0 to 100, default values of 25 and 75, step intervals of 10, and a custom text formatting function to display percentage values.
+
+## Contributing
+
+Contributions to the **RangeSlider** component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's GitHub repository.

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

@@ -0,3 +1,4 @@
+/// <reference types="react" />
 import { RangeSliderProps } from './atoms-range-slider.type';
-export declare function RangeSlider({ id, dataTestId, min, max, values, step, disabled, onChange, formatText, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLDivElement>>;
 export default RangeSlider;

No alert changes

Improved metrics

Total package byte prevSize

72051

increased by5.09%

Lines of code

1638

increased by0.12%

Number of lines in readme file

99

increased by1000%

Dependency changes

• + Added@edirect/frontend-foundations@0.0.67(transitive)

• + Addedcaniuse-lite@1.0.30001696(transitive)

• + Addedelectron-to-chromium@1.5.90(transitive)

• - Removed@edirect/frontend-foundations@0.0.58(transitive)

• - Removedcaniuse-lite@1.0.30001698(transitive)

• - Removedelectron-to-chromium@1.5.95(transitive)

• Updated@edirect/frontend-foundations@0.0.67