A React component wrapper for the omni-slider from PricelineLabs.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
changelog.md
index.js
package.json
readme.md
rollup.config.js

readme.md

React OmniSlider

The OmniSlider was created by PricelineLabs and it's a two way slider with a nice API.

See the Github page - https://github.com/pricelinelabs/omni-slider

For the React demo, see - http://3stacks.github.io/react-omnislider/

Installation

  • npm install @lukeboyle/react-omnislider --save

Usage

In your React app, import the OmniSlider component.

  import OmniSlider from 'react-omnislider'
  
  <OmniSlider/>
  
  <OmniSlider options={{ start: 100, end: 1000, min: 10, max: 1500 }}/>

Or when using Redux

  	
  	function appReducer(state, action) {
  	  switch(action.type) {
  	   case('SLIDER_VALUE_CHANGED'):
  	     console.log(action.payload.positions);
      break;
  	  }
  	}
  	
  	const onSliderChanged = function(positions) {
  	  store.dispatch({
        type: 'SLIDER_VALUE_CHANGED',
        payload: {
          positions
        }
      })
    }

  <OmniSlider onChange={onSliderValueChanged} options={{ start: 100, end: 1000, min: 10, max: 1500 }}/>

There are no required props, however, there are several you can use

Props

  • options (Object | Required)
  • onStart (Function | Optional) - Callback for when the slider starts moving
  • onChange (Function | Optional) - Callback for when the slider is moving
  • onFinish (Function | Optional) - Callback for when the slider stops moving

options

For a list of all options, see the omni-slider docs - https://github.com/pricelinelabs/omni-slider

onStart, onChange, onFinish

All of these functions return the positions of the left and right in an object.

  Object { left: 0, right: 80.5497 }

Developing the plugin

  • Clone the repo
  • Run npm install
  • Make changes in src/index.jsx
  • Build the changes with npm run build to convert it to commonjs