Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-rangeslider-withmarker with all npm packages installed. Try it out:

var reactRangesliderWithmarker = require("react-rangeslider-withmarker")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-rangeslider-withmarker v1.0.2

This is a fork from https://github.com/whoisandie/react-rangeslider. Added custom min max markers on the slider.

React Rangeslider with Markers NPM Package

This is a fork from https://github.com/whoisandie/react-rangeslider. Added custom min max markers on the slider.

Check out examples.

Install

Install via npm (use --save to include it in your package.json)

$ npm install react-rangeslider-withmarker --save

Usage

React Rangeslider is bundled with a single slider component. You can require them in plain old ES5 syntax or import them in ES6 syntax.

...plain old ES5

var React = require('react');
var Slider = require('react-rangeslider-withmarker');

var Volume = React.createClass({
    getInitialState: function(){
        return {
            value: 10,
        };
    }

    handleChange: function(value) {
        this.setState({
            value: value,
        });
    }

    render: function() {
        return (
            <Slider
        value={value}
        orientation="vertical"
        onChange={this.handleChange} />
        );
    }
});

module.exports = Volume;

... or use ES6 syntax

import React, { Component } from 'react';
import Slider from 'react-rangeslider-withmarker';

export default Volume extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      value: 10 /** Start value **/
    };
  }

  handleChange(value) {
    this.setState({
      value: value
    });
  }

  render() {
    return (
      <Slider
        value={value}
        orientation="vertical"
        onChange={this.handleChange} />
    );
  }
}

There's also a umd version available at lib/umd. The component is available on window.ReactRangeslider.

API

Rangeslider is bundled with a single component, that accepts data and callbacks only as props.

Component

var Slider = require('react-rangeslider');

// inside render
<Slider
    min={String or Number}
    max={String or Number}
    step={String or Number}
    orientation={String}
  value={Number}
  onChange={Function} />

Props

PropDefaultDescription
min0minimum value the slider can hold
max100maximum value the slider can hold
step1step in which increments/decrements have to be made
orientationhorizontalorientation of the slider
value-current value of the slider
onChange-function the slider takes, current value of the slider as the first parameter

Issues

Feel free to contribute. Submit a Pull Request or open an issue for further discussion.

License

MIT © whoisandie

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free