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'
    />
);

More info

See GitHub