├── .eslintrc ├── .gitignore ├── LICENSE ├── index.js ├── package.json └── readme.md /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "node": true, 4 | "browser": true 5 | }, 6 | "parser": "babel-eslint", 7 | "plugins": [ 8 | "react" 9 | ], 10 | "rules": { 11 | "curly": [0], 12 | "react/no-multi-comp": 1, 13 | "react/prop-types": [0], 14 | "no-alert": [0], 15 | "no-unused-vars": [0], 16 | "no-redeclare": [1], 17 | "new-cap": [0], 18 | "quotes": [2, "single"], 19 | "eol-last": [0], 20 | "no-mixed-requires": [0], 21 | "camelcase": [0], 22 | "consistent-return": [0], 23 | "no-underscore-dangle": [0], 24 | "comma-spacing": [0], 25 | "key-spacing": [0], 26 | "no-use-before-define": [0] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | ISC License 2 | 3 | Copyright (c) 2015, Mapbox 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted, provided that the above 7 | copyright notice and this permission notice appear in all copies. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 10 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 11 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 12 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 13 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 14 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 15 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 16 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react'); 4 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 5 | 6 | var Range = React.createClass({ 7 | displayName: 'Range', 8 | propTypes: { 9 | onChange: React.PropTypes.func, 10 | onClick: React.PropTypes.func, 11 | onKeyDown: React.PropTypes.func, 12 | onMouseMove: React.PropTypes.func 13 | }, 14 | getDefaultProps: function() { 15 | return { 16 | type: 'range', 17 | onChange: function(){}, 18 | onClick: function(){}, 19 | onKeyDown: function(){}, 20 | onMouseMove: function(){} 21 | }; 22 | }, 23 | onRangeChange: function(e) { 24 | this.props.onMouseMove(e); 25 | if (e.buttons !== 1 && e.which !== 1) return; 26 | this.props.onChange(e); 27 | }, 28 | onRangeClick: function(e) { 29 | this.props.onClick(e); 30 | this.props.onChange(e); 31 | }, 32 | onRangeKeyDown: function(e) { 33 | this.props.onKeyDown(e); 34 | this.props.onChange(e); 35 | }, 36 | setRangeRef: function(ref) { 37 | this.range = ref; 38 | }, 39 | componentWillReceiveProps: function(props) { 40 | this.range.value = props.value; 41 | }, 42 | render: function() { 43 | var props = _extends({}, this.props, { 44 | defaultValue: this.props.value, 45 | onClick: this.onRangeClick, 46 | onKeyDown: this.onRangeKeyDown, 47 | onMouseMove: this.onRangeChange, 48 | onChange: function() {}, 49 | ref: this.setRangeRef 50 | }); 51 | delete props.value; 52 | return React.createElement( 53 | 'input', 54 | props 55 | ); 56 | } 57 | }); 58 | 59 | module.exports = Range; 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mapbox/react-range", 3 | "version": "0.0.7", 4 | "description": "A react component that makes input type=range compatible across all browsers", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "eslint --no-eslintrc -c .eslintrc index.js" 8 | }, 9 | "keywords": [ 10 | "react", 11 | "react-component", 12 | "component", 13 | "input", 14 | "type", 15 | "range", 16 | "IE", 17 | "onChange" 18 | ], 19 | "dependencies": { 20 | "react": "^0.14.2" 21 | }, 22 | "devDependencies": { 23 | "babel-core": "^5.8.22", 24 | "babel-eslint": "^3.0.1", 25 | "eslint": "^0.20.0", 26 | "eslint-plugin-react": "^2.2.0" 27 | }, 28 | "author": "Bobby Sudekum", 29 | "license": "BSD-3-Clause", 30 | "repository": { 31 | "type": "git", 32 | "url": "git@github.com:mapbox/react-range.git" 33 | } 34 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ### ⚠️ This repo is archived ⚠️ 2 | 3 | For a maintained alternative, check out https://mapbox.github.io/mr-ui/#controlrange. 4 | 5 | --- 6 | 7 | # React Range 8 | 9 | A react component that makes `` compatible across all browsers. 10 | 11 | ### Why? 12 | 13 | It is a [known issue](https://github.com/facebook/react/issues/554) the `onChange` event does not work in IE. This seeks to be a simple drop in replacement for any `` and still have the `onChange` event fire in IE. 14 | 15 | ### Usage 16 | 17 | You can pass in any `props` and `className`s as necessary: 18 | 19 | ```jsx 20 | var Range = require('@mapbox/react-range'); 21 | 22 | 29 | ``` 30 | --------------------------------------------------------------------------------