react-smooth-range-input - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #go #golang #android #machine-learning #rust #deep-learning #macos #cli #awesome-list #ios

react-smooth-range-input

(★ 402)

🎚 React beautiful input range slider

File Explorer

Download Latest Version (.zip)

- config.yml
- FUNDING.yml
- - favicon.ico
  - index.html
  - manifest.json
- - App.css
  - App.tsx
  - index.css
  - index.tsx
  - logo.svg
  - react-app-env.d.ts
  - serviceWorker.ts
- .gitignore
- example.gif
- now.json
- package.json
- README.md
- tsconfig.json
- yarn.lock
- - controller.test.tsx.snap
  - sliderIndicator.test.tsx.snap
- - colors.ts
  - svgPath.ts
- - createArrayWithNumbers.ts
  - debounce.test.ts
  - debounce.ts
  - findElementXandY.ts
  - isTouchDevice.ts
  - preventScrollOnMobile.test.ts
  - preventScrollOnMobile.ts
  - sliderMeasure.test.ts
  - sliderMeasure.ts
- controller.test.tsx
- controller.tsx
- index.test.tsx
- index.tsx
- sliderIndicator.test.tsx
- sliderIndicator.tsx
.gitignore
.npmignore
CONTRIBUTING.md
jest.config.js
jestConfig.json
package-lock.json
package.json
README.md
rollup.config.js
setup.ts
tsconfig.jest.json
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd react-smooth-range-input

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ npm install react-smooth-range-input

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

<p>
    <a href="https://react-smooth-range-input.now.sh" target="_blank">
        <img height="500" src="https://raw.githubusercontent.com/bluebill1049/react-smooth-range-input/master/example/example.gif" alt="https://react-smooth-range-input.now.sh" />
    </a>
</p>

## Quickstart

```jsx
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 |

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