SliderNP React Library

SliderNP is a lightweight React component library for creating customizable sliders.

Installation

Install SliderNP using npm:

npm install slider-np

 Features

Easily create customizable sliders in your React projects.
Supports setting the initial value of the slider within the range of -10 to 10.
Customize the color of the scale, left scale, and right scale.
Adjust the size and color of the slider pointer.
Option to dynamically adjust the pointer color based on the value.
Control the width of the slider and the gap between scale elements.
Automatically adjust the value color based on the value.
Hover functionality to display the current value when hovering over the slider.

#Usage
Import the SliderNP component and use it in your React project:

import React from 'react';
import { SliderNP } from 'slider-np';

function App() {
  return (
    <div>
      <SliderNP
        value={5}
        scaleColor="#ddd"
        leftScaleColor="#ccc"
        rightScaleColor="#bbb"
        pointerSize="16px"
        pointerColor="#ff0000"
        pointerColorRange={true}
        sliderWidth="300px"
        gapBetween="2px"
        valueColorAuto={true}
      />
    </div>
  );
}

export default App;


 Getting started

React Image Gallery requires **React 16.0.0 or later.**

 Props
The SliderNP component accepts the following props:

value: The initial value of the slider (between -10 and 10).
scaleColor: The color of the scale (if not provided, it uses leftScaleColor and rightScaleColor).
leftScaleColor: The color of the left scale.
rightScaleColor: The color of the right scale.
pointerSize: The size of the slider pointer.
pointerColor: The color of the slider pointer.
pointerColorRange: Whether to adjust the pointer color based on the value.
sliderWidth: The width of the slider.
gapBetween: The gap between the scale elements.
valueColorAuto: Whether to automatically adjust the value color based on the value.


 Examples
You can find more usage examples and customization options in the examples folder of this repository.

 Contributing

Contributions, bug reports, and feature requests are welcome. Please follow the contribution guidelines before submitting a pull request.


# Build the example locally (requires node >= 12.13)

git clone https://github.com/singhAkash790/slider-np/tree/main cd slider-np npm install --global yarn yarn install yarn start

# License

MIT