react-simple-slider-component

A simple slider library in react

Install

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

Example

LINK - Codesandbox

Usage

Class Component

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

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