preact-range-slider
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

NPM Dependencies DevDependencies

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

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

License

MIT.

Package Sidebar

Install

npm i preact-range-slider

Weekly Downloads

22

Version

0.2.0

License

MIT

Last publish

Collaborators

  • avol