react-md-slider

A simple and reusable React draggable slider component. (Demo)

Installation

The package can be installed via npm:

npm install --save react-md-slider

Or via yarn:

yarn add react-md-slider

Usage

import React from 'react';
import './App.css';
import Slider from 'react-md-slider';
import 'react-md-slider/dist/index.css';
 
function App() {
  const [value, setValue] = useState(10);
 
  return (
    <div className="App">
 
      <h1>React Number Slider</h1>
      <h4>Value: {value}</h4>
 
      <div className='example-container'>
        <Slider
          onChange={setValue}
          value={value}
          max={200}
          min={10}
          step={10}
          label="Number slider"¸
          highlighted
        />
      </div>
    </div >
  );
}
 
export default App;
 

API Documentation

For component props, methods, and living examples, please see the Demo:

License

MIT © shreyass27