Nutmeg Pumpkin Macchiato

    super-react-slider

    3.0.19 • Public • Published

    Super Duper React Slider

    The Awesome Humble Super Duper Epic React Slider

    Authors: X5Engine, Original from Drew Schuster & Greg Mathews

    npm version npm downloads

    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

    Install

    npm i super-react-slider

    DownloadsWeekly Downloads

    1

    Version

    3.0.19

    License

    MIT

    Unpacked Size

    54.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • x5engine