Semantic UI React Multirange Slider

Multirange slider control for Semantic UI React

Prerequisites

{
  "react": "*",
  "react-dom": "*",
  "semantic-ui-react": "*"
}

Installation

Using NPM:

npm install semantic-ui-react-multirange-slider

or Yarn:

yarn add semantic-ui-react-multirange-slider

Usage

In your application root, first import the component styles:

import 'semantic-ui-css/semantic.min.css';
import 'semantic-ui-react-multirange-slider/styles.css';

Then import the slider component in your code:

import { MultirangeSlider } from 'semantic-ui-react-multirange-slider';

export default () => {

    // Continuesly fired while a value changes
    function handleInput(event, data) {
        /* `data` format:
            {
                index,         // -> The index of the changed thumb
                value,         // -> The current value of the changed thumb
                previousValue, // -> The previous value of the changed thumb
                initialValue   // -> The initial value of the changed thumb
            }
        */
    }

    // Fired after a value has changed
    function handleChange(event, data) {
        /* `data` format:
            {
                index,         // -> The index of the changed thumb
                value,         // -> The current value of the changed thumb
                initialValue   // -> The initial value of the changed thumb,
                values         // -> The current array of values
            }
        */
    }

    return (
        <MultirangeSlider
            min={20}
            max={150}
            step={10}
            values={[40, 70, 120]}
            trackColor='orange'
            onInput={handleInput}
            onChange={handleChange}
        />
    );
};

Simple Slider Examples

Slider without options

import { SimpleSlider } from 'semantic-ui-react-multirange-slider';

export default () => (
    <SimpleSlider />
);

Slider with two thumbs

import { SimpleSlider } from 'semantic-ui-react-multirange-slider';

export default () => (
    <SimpleSlider
        value={40}
    />
);

Slider with blue track

import { SimpleSlider } from 'semantic-ui-react-multirange-slider';

export default () => (
    <SimpleSlider
        value={40}
        trackColor='blue'
    />
);

Multirange Slider Example

Multirange slider with two thumbs

import { MultirangeSlider } from 'semantic-ui-react-multirange-slider';

export default () => (
    <MultirangeSlider
        values={[20, 60]}
    />
);

Multirange slider with four thumbs

import { MultirangeSlider } from 'semantic-ui-react-multirange-slider';

export default () => (
    <MultirangeSlider
        values={[10, 30, 50, 80]}
    />
);

Multirange slider with three thumbs and green track

import { MultirangeSlider } from 'semantic-ui-react-multirange-slider';

export default () => (
    <MultirangeSlider
        values={[10, 40, 80]}
        trackColor='green'
    />
);

Demo

Clone the package and run yarn start

API

Modules

MultirangeSlider

A MultirangeSlider is used to modify multiple values inside a given range

SimpleSlider

A SimpleSlider is used to modify a value inside a given range

MultirangeSlider

A MultirangeSlider is used to modify multiple values inside a given range

Param	Type	Default	Description
[min]	number	0	The minimum possible value
[max]	number	100	The maximum possible value
[step]	number	1	The step value
[values]	Array.	[0]	An array holding all the values
[trackColor]	string	"black"	The color of the track segments
[onInput]	function		Continuesly fired while a value changes
[onChange]	function		Fired after a value has changed

SimpleSlider

A SimpleSlider is used to modify a value inside a given range

Param	Type	Default	Description
[min]	number	0	The minimum possible value
[max]	number	100	The maximum possible value
[step]	number	1	The step value
[value]	number	0	The value of the slider
[trackColor]	string	"black"	The color of the track
[onInput]	function		Continuesly fired while the value changes
[onChange]	function		Fired after the value has changed