# greg-slider

> slider component

Latest version **0.0.6** (published 2015-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install greg-slider
pnpm add greg-slider
yarn add greg-slider
bun add greg-slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2015-06-19 |
| First published | 2015-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Greg Mathews |
| Maintainers | gregsqueeb |
| Keywords | slider, range, mobile, react-component |

## Links

- npm: https://www.npmjs.com/package/greg-slider
- Repository: https://github.com/gregsqueeb/greg-slider
- Issues: https://github.com/gregsqueeb/greg-slider/issues
- npm.io page: https://npm.io/package/greg-slider

## Dependencies (4)

- [cuid](https://npm.io/package/cuid.md) ^1.2.5
- [lodash](https://npm.io/package/lodash.md) ^3.8.0
- [react-draggable](https://npm.io/package/react-draggable.md) ^0.8.1
- [react_explicit_prop_declaration](https://npm.io/package/react_explicit_prop_declaration.md) ^0.1.0

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.0.6 (latest) — 2015-06-19
- 0.0.5 — 2015-06-19
- 0.0.2 — 2015-06-19
- 0.0.1 — 2015-06-18

## README

# Greg's Slider

Slider component for react. 🔥🔥🔥

Special thanks to [@abacon](https://github.com/abacon) & [@derekr](https://github.com/derekr) for answering all my questions!

## Installing

```bash
$ npm install greg-slider
```

If you aren't using browserify, a
[compiled version of greg-slider](dist/slider.js) is available.

## Details
A `<GregSlider />` 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. <GregSlider /> is also compatible with IE9.

## API
Props:
**`value`**: Determines the start position of your slider. Must be a number between `min` and `max`. Default `value` is `min`.

**`min`**: The smallest number you want in the range. Default `min` is 0.

**`max`**: The largest number you want in the range. Default `max` is 10.

**`ticks`**: A boolean to show tick marks on the slider. Default true.

**`onChange`**: A function that will be fired when the position of the handle changes. Default none

**`snapToTick`**: A boolean to have the handle snap to a tick mark. Default true

## Example usage

```js
/** @jsx React.DOM */
var React = require('react'),
	GregSlider = require('greg-slider');

var App = React.createClass({

  handleChange: function () {
		console.log('Change');
	},

	render: function () {
		return (
			<GregSlider
				value={0}
				min={0}
        max={10}
				ticks={true}
        snapToTick={true}
				grid={[25, 25]}
				zIndex={100}
				onChange={this.handleChange} />
		);
	}
});

React.renderComponent(<App/>, document.body);
```



value: React.PropTypes.number,
min: React.PropTypes.number,
max: React.PropTypes.number,
ticks: React.PropTypes.bool,
onChange: React.PropTypes.func,
snapToTick: React.PropTypes.bool

## Contributing

- Fork the project
- Make changes.
- Double check changes work by adding it to the examples: `$ ./build-examples`
- Update README with appropriate docs.
- Commit and PR

## License

MIT

---
_Source: https://npm.io/package/greg-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._