https://github.com/beekai-oss/react-smooth-range-input

🎚 React beautiful input range slider
https://github.com/beekai-oss/react-smooth-range-input

animation input-range react slider smooth

Last synced: 2 days ago
JSON representation

🎚 React beautiful input range slider

• Host: GitHub
• URL: https://github.com/beekai-oss/react-smooth-range-input
• Owner: beekai-oss
• Created: 2019-01-10T04:35:34.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T17:31:50.000Z (over 1 year ago)
• Last Synced: 2024-05-05T21:43:05.300Z (6 months ago)
• Topics: animation, input-range, react, slider, smooth
• Language: TypeScript
• Homepage: https://react-smooth-range-input.now.sh/
• Size: 3.35 MB
• Stars: 400
• Watchers: 3
• Forks: 16
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# 🎚 React Smooth Range Input

[![Coverage Status](https://coveralls.io/repos/github/bluebill1049/react-smooth-range-input/badge.svg?branch=master)](https://coveralls.io/github/bluebill1049/react-smooth-range-input?branch=master) [![npm downloads](https://img.shields.io/npm/dm/react-smooth-range-input.svg?style=flat-square)](https://www.npmjs.com/package/react-smooth-range-input) [![npm](https://img.shields.io/npm/dt/react-smooth-range-input.svg?style=flat-square)](https://www.npmjs.com/package/react-smooth-range-input) [![npm](https://badgen.net/bundlephobia/minzip/react-smooth-range-input)](https://badgen.net/bundlephobia/minzip/react-smooth-range-input)

- Smooth input range

- Beautiful animation interaction

- Tiny size

## Install

    $ npm install react-smooth-range-input

## Example



    

        

    



## Quickstart

```jsx

import react from 'react';

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

export default () => ;

```

## 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 |

## By the makers of BEEKAI

We also make [BEEKAI](https://www.beekai.com/). Build the next-generation forms with modern technology and best in class user experience and accessibility.