Slider

import React from 'react';
import { Slider } from 'seduo-ui';

const Example = (props) => (
    <div>
        <div className="my-9 mx-5">
            {/* Slider with steps and tooltip */}
            <Slider
                range={[
                    {
                        value: 0,
                        step: 1,
                    },
                    {
                        value: 10,
                        step: 1,
                    },
                    {
                        value: 30,
                        step: 10,
                    },
                    {
                        value: 100,
                        step: 25,
                    },
                    {
                        value: 250,
                        step: 50,
                    },
                    {
                        value: 500,
                    },
                ]}
            >
                {(value: number) => <div className="StepRangeSlider__tooltip">{value}</div>}
            </Slider>
        </div>
        <div className="my-9 mx-5">
            {/* Slider with different steps */}
            <Slider
                range={[
                    {
                        value: 0,
                        step: 1,
                    },
                    {
                        value: 10,
                        step: 1,
                    },
                    {
                        value: 30,
                        step: 10,
                    },
                    {
                        value: 100,
                        step: 25,
                    },
                ]}
            />
        </div>
        <div className="my-9 mx-5">
            {/* Slider with disabled pips */}
            <Slider
                value={50}
                range={[
                    {
                        value: 0,
                    },
                    {
                        value: 100,
                    },
                ]}
                pips={false}
            />
        </div>
        <div className="my-9 mx-5">
            {/* Disabled slider */}
            <Slider
                value={40}
                range={[
                    {
                        value: 0,
                    },
                    {
                        value: 100,
                    },
                ]}
                disabled={true}
            />
        </div>
    </div>
);

export default Example;

type Props = {|
  range: Array<RangeType>,
  value: number,
  disabled: boolean,
  pips: boolean,
  children: (value: number) => Node,
  className?: string,
  id?: string,
  name?: string,
  onChange?: (value: number) => void,
  onChangeComplete?: (value: number) => void,
|};

static defaultProps = {
  value: 0,
  disabled: false,
  range: [ { value: 0, step: 1 }, { value: 100 } ],
  children: (value: number) => <div className="StepRangeSlider__tooltip">{value}</div>,
  pips: true,
};