react-ion-slider

v1.0.17

Published

3 years ago

ion-slider react version

Downloads

670

0High
0Medium
0Low

gipyeong

About The Project

Ion-rangeslider react module, this module mapping ion-rangeslider properties to props.

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

npm install npm@latest -g

react

npm install --save react react-dom

Installation

Npm install

npm install --save react-ion-slider

yarn add react-ion-slider --save

Usage

Get Started

Normal

Before using react-ion-slider please import module

import IonRangeSlider from 'react-ion-slider'

Implement below codes in the react render method

  <IonRangeSlider type={} min={} max={} from={} to={} step={} values={} keyboard={} />

Update options manually without componentDidMount

<IonRangeSlider ref={r => this.ionSlider = r} />

this.ionSlider.update({skin: 'flat', min: 100, max: 500, from: 120, to: 240, type: 'double'})

Next.js

Before using react-ion-slider please import jquery module in your HEAD

<Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossOrigin="anonymous"></script>
</Head>

Please load using dynamic import

const IonRangeSlider = dynamic(() => import('react-ion-slider'),{ssr: false})

Supported Props

| Option |------------------------|---- | Basic setup | | type | min | 10 | max | 100 | from | min | to | max | Advanced setup | | step | 1 | values | [] | keyboard | Grid setup | | grid | grid_margin | grid_num | 4 | grid_snap | Interval control | | drag_interval | min_interval | — | max_interval | — | Handles control | | from_fixed | from_min | min | from_max | max | from_shadow | to_fixed | to_min | min | to_max | max | to_shadow | UI control | | skin | hide_min_max | hide_from_to | force_edges | extra_classes | — | block | Prettify numbers | | prettify_enabled | prettify_separator | prettify | — | | prefix | — | postfix | — | max_postfix | — | decorate_both | values_separator | Data control | | input_values_separator | " ; " | disable | Callbacks | | scope | onStart | onChange | onFinish | onUpdate | Defaults | Type | Description | ------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | | | | "single" | string | Choose slider type, could be single - for one handle, or double for two handles | | number | Set slider minimum value | | number | Set slider maximum value | | number | Set start position for left handle (or for single handle) | | number | Set start position for right handle | | | | | number | Set sliders step. Always > 0. Could be fractional. | | array | Set up your own array of possible slider values. They could be numbers or strings. If the values array is set up, min, max and step param, are no longer can be changed. | | TRUE | boolean | Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D. | | | | | FALSE | boolean | Enables grid of values. | | TRUE | boolean | Set left and right grid borders. | | number | Number of grid units. | | FALSE | boolean | Snap grid to sliders step (step param). If activated, grid_num will not be used. | | | | | FALSE | boolean | Allow user to drag whole range. Only in double type | | number | Set minimum diapason between sliders. Only in double type | | number | Set maximum diapason between sliders. Only in double type | | | | | FALSE | boolean | Fix position of left (or single) handle. | | number | Set minimum limit for left handle. | | number | Set the maximum limit for left handle | | FALSE | boolean | Highlight the limits for left handle | | FALSE | boolean | Fix position of right handle. | | number | Set the minimum limit for right handle | | number | Set the maximum limit for right handle | | FALSE | boolean | Highlight the limits for right handle | | | | | "flat" | string | Choose UI skin to use | | FALSE | boolean | Hides min and max labels | | FALSE | boolean | Hide from and to labels | | FALSE | boolean | Slider will be always inside it's container. | | string | Traverse extra CSS-classes to slider container | | FALSE | boolean | Locks slider and makes it inactive (visually). input is NOT disabled. Can still be send with forms. | | | | | TRUE | boolean | Improve readability of long numbers. 10000000 → 10 000 000 | | " " | string | Set up your own separator for long numbers. 10 000, 10.000, 10-000 etc. | | null | function | Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates. | | | | | string | Set prefix for values. Will be set up right before the number: $100 | | string | Set postfix for values. Will be set up right after the number: 100k | | string | Special postfix, used only for maximum value. Will be showed after handle will reach maximum right position. For example 0 — 100+ | | TRUE | boolean | Used for "double" type and only if prefix or postfix was set up. Determine how to decorate close values. For example: $10k — $100k or $10 — 100k | | " — " | string | Set your own separator for close values. Used for double type. Default: 10 — 100. Or you may set: 10 to 100, 10 + 100, 10 → 100 etc. | | | | | string | Separator for double values in input value property. Default FROM;TO. Only for double type | | FALSE | boolean | Locks slider and makes it inactive. inputis disabled too. Invisible to forms. | | | | | null | object | Scope for callbacks. Pass any object. Callback will be executed like this: onChange.call(scope); | | null | function | Callback. Is called on slider start. | | null | function | Callback. IS called on each values change. | | null | function | Callback. Is called than user releases handle. | | null | function | Callback. Is called than slider is modified by external methods update or reset. |

Ref Functions

| Option | Defaults | Type | Description | |--------|----------|----------|---------------------------------| | update | null | function | You can update options manually |

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

GiPyeong Lee - @gipyeong - [email protected]

Project Link: https://github.com/gipyeong-lee/react-ion-slider

Reference

Best Readme Template