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!

Installation

npm install react-slide-rule

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>
  );
}

More examples

Check out the example codes in the repository, or demos.

Props

A list of all props available here.

Hint: Use suggestion/auto complete to find the props in your code editor.

License

This project is licensed under the MIT license.