React-slide-rule NPM

react-slide-rule

React-slide-rule is a React component shaped like a ruler/slide rule, allowing users to select a value along a subjective range and step.

More demos available here!

examples

Installation

npm install react-slide-rule

Simple example

simple-example

import React, { useState } from 'react';
import SlideRule from 'react-slide-rule';

const STYLE = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
};

export default function () {
  const [value, setValue] = useState(150);

  return (
    <div style={STYLE}>
      <p>{value}</p>
      <SlideRule value={value} onChange={setValue} />
    </div>
  );
}