# preact-range-slider

> Preact component for input values with range slider

Latest version **0.2.0** (published 2017-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install preact-range-slider
pnpm add preact-range-slider
yarn add preact-range-slider
bun add preact-range-slider
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2017-10-11 |
| First published | 2017-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Andrey Avol Volynkin |
| Maintainers | avol |
| Keywords | preact, component, slider, range, range-slider |

## Links

- npm: https://www.npmjs.com/package/preact-range-slider
- Repository: https://github.com/m18ru/preact-range-slider
- Homepage: https://github.com/m18ru/preact-range-slider#readme
- Issues: https://github.com/m18ru/preact-range-slider/issues
- npm.io page: https://npm.io/package/preact-range-slider

## Dependencies (1)

- [classjoin](https://npm.io/package/classjoin.md) ^0.2.1

## 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.2.0 (latest) — 2017-10-11
- 0.1.3 — 2017-08-14
- 0.1.2 — 2017-06-21
- 0.1.1 — 2017-06-21
- 0.1.0 — 2017-05-31
- 0.0.3 — 2017-05-26

## README

[![NPM][npm]][npm-url]
[![Dependencies][deps]][deps-url]
[![DevDependencies][deps-dev]][deps-dev-url]

# preact-range-slider

Preact component for input values with range slider

Based on `rc-slider` for React, with a lot of changes (so, this component is not
compatible with original).

Written in TypeScript, types are also included.

## Demo

[On CodePen](https://codepen.io/avol/pen/LyovJb).

## Installation

For bundlers and other NPM-based environments:

```
npm install --save-dev preact tslib preact-range-slider
```

Package `tslib` required in ES5-ESM version for `__extends` and `__assign`
helper functions. It's not required for ES2015 version and for UMD version
(functions is included in UMD).

## Usage

There is two components:

* `Slider` — for range slider with one handle.
* `MultiSlider` — for range slider with multiple handles (two and more).

```jsx
render(
	<div>
		<Slider />
		<MultiSlider />
	</div>,
	container
);
```

### UMD

UMD is default for this package, so just use something like:

```js
import {Slider, MultiSlider} from 'preact-range-slider';
// or
const {Slider, MultiSlider} = require( 'preact-range-slider' );
```

For using directly in browser (import with `<script>` tag in HTML-file):

* [Development version](https://unpkg.com/preact-range-slider/es5/index.js)
* [Production version](https://unpkg.com/preact-range-slider/es5/preact-range-slider.min.js)

You can use AMD or `PreactRangeSlider` global variable.

### ES2015 module systems

Package contain `module` property for use with ES2015 module bundlers
(like Rollup and Webpack 2).

### ES2015 code base

If you don't want to use transplitted to ES5 code, you can use included
ES2015 version.

You can directly import this version:

```js
import {Slider, MultiSlider} from 'preact-range-slider/es2015';
```

Or specify alias in Webpack config:

```js
{
	// …
	resolve: {
		extensions: ['.ts', '.tsx', '.js'],
		alias: {
			'preact-range-slider': 'preact-range-slider/es2015',
		},
	},
};
```

### Styles

You can use SCSS mixin from `preact-range-slider/assets/_mixin.scss`, where
you can specify prefix for internal classes:

```scss
div.my-range-slider
{
	@import "mixin";
	@include range-slider("my-");
}
```

Or you can use compiled CSS file `preact-range-slider/assets/index.css` with
default parameters (`div.range-slider` element, internal classes without
prefix).

You can override colors by creating variables with these names:

```
$range-slider-clr-primary
$range-slider-clr-secondary
$range-slider-clr-disabled
$range-slider-clr-obscured
$range-slider-clr-text
$range-slider-clr-dot-bg
$range-slider-clr-handle-bg
$range-slider-clr-tooltip-fg
$range-slider-clr-tooltip-bg
```

like:

```scss
$range-slider-clr-primary: $my-theme-primary-color;
@import "preact-range-slider/assets/index.scss";
```

## API

### Common properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `min` | `number` | `0` | The minimum value of the slider. |
| `max` | `number` | `100` | The maximum value of the slider. |
| `step` | `number` | `1` | Value to be added or subtracted on each step the slider makes. Step can be set to zero or less to make `marks` as steps. |
| `marks` | `{[key: number]: string | JSX.Element | Array<string | JSX.Element>}` | `{}` | Marks on the slider. The key determines the position, and the value determines what will show. |
| `dots` | `boolean` | `false` | Show dots on slider (with step as interval)? |
| `included` | `boolean` | `true` | As continuous value interval (otherwise, as independent values)? |
| `vertical` | `boolean` | `false` | Vertical slider mode? |
| `disabled` | `boolean` | `false` | Disable control (handles can't be moved)? |
| `className` | `string` | `'range-slider'` | Component main class name. |
| `classesPrefix` | `string` | `''` | Prefix for secondary class names in component. |
| `tipFormatter` | `( value: number ) => string | JSX.Element | Array<string | JSX.Element>` | `String` | A function to format value on tooltip. |

### Slider properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `defaultValue` | `number` | `0` | Initial value of slider. |
| `value` | `number` | `undefined` | Current value of slider (for controlled component). |
| `onBeforeChange` | `( value: number ) => void` | `noop` | Triggered before value is start to change (on mouse down, etc). |
| `onChange` | `( value: number ) => void` | `noop` | Triggered while the value of Slider changing. |
| `onAfterChange` | `( value: number ) => void` | `noop` | Triggered after slider changes stop (on mouse up, etc). |

### MultiSlider properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `defaultValue` | `number[]` | `[0, 0]` | Initial value of slider. |
| `value` | `number[]` | `undefined` | Current value of slider (for controlled component). |
| `count` | `number` | `1` | How many ranges to render (handles count = count + 1). |
| `allowCross` | `boolean` | `true` | Allow handles to cross each other? |
| `pushable` | `boolean | number` | `false` | Allow pushing of surrounding handles when moving? When set to a number, the number will be the minimum ensured distance between handles. |
| `onBeforeChange` | `( value: number[] ) => void` | `noop` | Triggered before value is start to change (on mouse down, etc). |
| `onChange` | `( value: number[] ) => void` | `noop` | Triggered while the value of Slider changing. |
| `onAfterChange` | `( value: number[] ) => void` | `noop` | Triggered after slider changes stop (on mouse up, etc). |

## Change Log

[View changelog](CHANGELOG.md).

## License

[MIT](LICENSE).

[npm]: https://img.shields.io/npm/v/preact-range-slider.svg
[npm-url]: https://npmjs.com/package/preact-range-slider

[deps]: https://img.shields.io/david/m18ru/preact-range-slider.svg
[deps-url]: https://david-dm.org/m18ru/preact-range-slider

[deps-dev]: https://img.shields.io/david/dev/m18ru/preact-range-slider.svg
[deps-dev-url]: https://david-dm.org/m18ru/preact-range-slider?type=dev

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