Nonflavored Prescription Medicine

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

    0.3.1 • Public • Published

    NPM Dependencies DevDependencies

    @aerian/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). Fork of preact-range-slider

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

    Install

    npm i @aerian/preact-range-slider

    DownloadsWeekly Downloads

    0

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    270 kB

    Total Files

    72

    Last publish

    Collaborators

    • darren.ivey
    • davinux
    • s-unya
    • ascorbic