React-ion-slider NPM

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