preact-range-slider

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.

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).

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

UMD

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

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
• Production version

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:

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

Or specify alias in Webpack config:

{
	// …
	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:

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:

$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
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

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
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.

License

MIT.

Changelog

[0.2.0] - 2017-10-11

Changed

• Color variables in SASS can be independently configured (thanks to @lennym).