rulers v1.0.8

Rulers

Rulers A complete library for building ruler components in any environment such as React, Angular and Vue.js.

Getting Started

Installation

• npm install rulers

PropTypes

React

import Rulers from 'rulers';

function App() {
    const rulerRef = useRef(null);
    const [state, setState] = useState(50000);

    useEffect(() => {
        renderRuler();
    }, [rulerRef])

    const handleValue = (value) => {
        console.log(value); //return value
        setState(value);
    }

    const renderRuler = () => {
        return new Rulers (
            {
                el: rulerRef.current,
                maxValue: 100000,
                minValue: 0,
                currentValue: state,
                handleValue: handleValue,
                precision: 100
            }
        );
    }

  return (
    <div className="App">

        <div ref={rulerRef} className='container'>
            <h2 className='typeName'>Value</h2>
            <div className='valueContainer'>
                <span className='value'>{state}</span>
            </div>
        </div>
    </div>
  );
}

export default App;

CSS

.App {

}
:root {
  font-size: 100px;
}

.container {
  padding: .1rem 0;
}

.typeName {
  position: relative;
  font-size: .16rem;
  line-height: .4rem;
  text-align: center;

  &:after {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    content: '';
    width: .5rem;
    height: .04rem;
    border-radius: .02rem;
    background-color: #00b0ab;
  }
}

.valueContainer {
  padding-bottom: .04rem;
  text-align: center;
  position: relative;
}

.value {
  padding-right: .04rem;
  font-size: .3rem;
}