react-smooth-range-input

Butter smooth input range - Beautiful animation interaction - Tiny size

Usage no npm install needed!

<script type="module">
  import reactSmoothRangeInput from 'https://cdn.skypack.dev/react-smooth-range-input';
</script>

README

🎚 React Smooth Range Input

Tweet CircleCI Coverage Status npm downloads npm npm

  • Butter smooth input range
  • Beautiful animation interaction
  • Tiny size

Install

$ npm install react-smooth-range-input

Example

https://react-smooth-range-input.now.sh

Quickstart

import react from 'react';
import Slider from 'react-smooth-range-input';

export default () => <Slider value={1} min={1} max={30} />;

Props

Prop Type Required Description
value number ✓ current value
min number ✓ min number range
max number ✓ max number range
onChange Function on value change callback
disabled boolean disable the component
hasTickMarks boolean = true show tick marks only apply to thick type
customController ({ ref: any, value: number }) => React.ReactNode custom controller: make sure to pass the ref