Super Duper React Slider

The Awesome Humble Super Duper Epic React Slider

Authors: X5Engine, Original from Drew Schuster & Greg Mathews

Demo

✨✨✨✨✨✨✨✨✨✨✨✨EPIC DEMO ✨✨✨✨✨✨✨✨✨✨

Installation

The easiest way to use super-react-slider is to install it from NPM and include it in your own build process (Webpack, Browserify, etc)

 npm i -S super-react-slider

or yarn it

 yarn add super-react-slider

You can also use the standalone UMD build by including dist/super-react-slider.js or dist/super-react-slider.min.js, as well as the styles from dist/super-react-slider.css or dist/super-react-slider.min.css.

To run the demo locally with live reload functionality:

npm i && npm start

Then open localhost:3000 in a browser.

Example usage

/** @jsx React.DOM */
import React, { useState } from "react";
import SuperSlider from "super-react-slider";

export default function App() {
  const [value, setValue] = useState(0);
  const [localBoxValue, setBoxValue] = useState(0);

  const handleChange = (val, x) => {
    console.log("change", val, x);
    setValue(val);
    setBoxValue(val * 500);
  };

  return (
    <div className="App">
      <h1>Humble Super Duper Epic Simple React Slider </h1>
      <h2>Start playing to see some super duper epic magic happen!</h2>
      <SuperSlider
        value={value}
        min={0}
        max={100}
        ticks={true}
        displayPopover={true}
        popoverValue={<h1>Epico {value}</h1>}
        displayBox={true}
        boxValue={localBoxValue + " Super"}
        handleColor={"magenta"}
        markers={[{ value: 10, label: "Five" }, { value: 5, label: "Seven" }, { value: 75, label: (<h5>Epicoooo</h5>) }]}
        onChange={handleChange}
      />
    </div>
  );
}

Details

A <SuperSlider/> element is an improved upon version of an HTML5 range type input. You are able to smoothly drag the handle no matter how large or small the number of your steps are, and you are able to style it more effectively. You can also add tick marks to your steps if you wish. <SuperSlider/> is also compatible with IE9.

Styles

Styles are generated from src/slider.css. That can be pulled directly into your build process.

API

Props:

value: (React.PropTypes.number) Determines the start position of your slider. Must be a number between min and max. Default value is min.

min: (React.PropTypes.number) The smallest number you want in the range. Default min is 0.

max: (React.PropTypes.number) The largest number you want in the range. Default max is 10.

ticks: (React.PropTypes.bool) A boolean to show tick marks on the slider. Default true.

markerLabel: (React.PropTypes.array) An array filled with values and labels for which position on the slider track you want to mark

onChange: (React.PropTypes.func) A function that will be fired when the position of the handle changes. Default none

displayPopover: (React.PropTypes.bool) A boolean to show a floating label below the handle. Default false

popoverValue: (React.PropTypes.any) A value to display in the popover and can be anything even a component. Default value.

displayBox: (React.PropTypes.bool) A boolean to show a floating label over the handle. Default false

popoverMarkerOnly: (React.PropTypes.bool) Only Show the Popover bubble only if the current value matches a value in the markers. Default false

boxValue: (React.PropTypes.any) A value to display in the top box and can be anything even a component. Default value.

handleColor: (React.PropTypes.string) A color to change the handle color (can be hex rgb or color name). Default #fffff.

Contributing

See CONTRIBUTING.md

License

MIT