Banded-payment-slider NPM

React-Banded-Payment-Slider

A React component for banded payment slider

Installation

npm install banded-payment-slider

Usage

import React from 'react';
import BandedPaymentSlider from 'banded-payment-slider';

const App = () => {
  const initialBands = [
    { from: 0, to: 50, percentage: 50 },
    { from: 50, to: 100, percentage: 100 },
  ];

  const handleBandsChange = (newBands) => {
    console.log('Bands updated:', newBands);
  };

  return (
    <BandedPaymentSlider
      bands={initialBands}
      onBandsChange={handleBandsChange}
      labels={{ percentage_paid: "Percentage Paid", delete_band: "Delete Band"}}
    />
  );
};

export default App;

Prop	Type	Description
`bands`	`Array<{ from: number, to: number, percentage: number }>`	An array of band objects, each representing a range and percentage.
`onBandsChange`	`(bands: Array<{ from: number, to: number, percentage: number }>) => void`	A callback function that receives the updated bands array when changes occur.
`labels`	`{ percentage_paid: string, delete_band: string }`	An object containing custom labels for the component. Use this to override default text or provide translations.

Build This Package

Run the build script:

npm run build

License MIT © Your Name

react component slider payment banded range

eslint

0.0.2

9 months ago

0.0.1

9 months ago