# react-simple-slider-component

> A simple slider library in react

[![NPM](https://img.shields.io/npm/v/react-simple-slider-component.svg)](https://www.npmjs.com/package/react-simple-slider-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-simple-slider-component
```


## Example

LINK  - [Codesandbox](https://codesandbox.io/s/react-dual-range-slider-blcdoz)


## Usage

### Class Component


```jsx
import React, { Component } from 'react'
import { MultiSliderComponent } from 'react-simple-slider-component'
import 'react-simple-slider-component/dist/index.css'

class Example extends Component {
  render() {
    return (
      <div style={{ width: "250px" }}>
      <MultiSliderComponent
        max={1000}
        min={0}
        onChange={({ min, max }) => {
          console.log(`minValue = ${min}, maxValue = ${max}`);
        }}
        bgRangeColor="#F70A23"
        bgTrackColor="#000"
        valueColor="#10B0F0"
      />
    </div>
    )
  }
}
```

### Function Component


```jsx
import React from 'react'
import { MultiSliderComponent } from 'react-simple-slider-component'
import 'react-simple-slider-component/dist/index.css'

const App = () => {
  return (
    <div style={{ width: "250px" }}>
      <MultiSliderComponent
        max={1000}
        min={0}
        onChange={({ min, max }) => {
          console.log(`minValue = ${min}, maxValue = ${max}`);
        }}
        bgRangeColor="#F70A23"
        bgTrackColor="#000"
        valueColor="#10B0F0"
      />
    </div>
  );
};

```

## License

MIT © [Yaswanth L](https://github.com/dlyaswanth)