Модульный конструктор одномерных и двумерных слайдеров

Предоставляет три компонента для 2d и три для 1d.

1d

import {Axis, StaticRange, DraggableRange} from 'fr-range-slider';

Axis

"Тело" слайдера. Остальные компоненты должны находится внутри него чтобы работать.

Требует в css:

• position: relative;

props:

• domain: массив [min, max] - пределы значений от начала до конца всей шкалы
• axis: 'x'|'y' - ось c которой берутся экранные координаты
• события мышки (onClick, onMouseMove и т.д.) - обработчики получают вторым параметром значение соответствующее позиции указателя.
• width, height - необязательно, число. Если не указано, будет браться из offsetWidth/Height

StaticRange

"Заполненная область" слайдера.

Требует в css:

• position: absolute;

props:

• top, left, right, bottom, width, height - указываются в единицах из domain родительского Axis, отображаются на соответствующие стили в процентах

DraggableRange

Наследуется от StaticRange. Те же требования к css. Те же props. Можно таскать мышкой.

props:

• onDrag, onDragStart, onDragEnd: (val) => {}

Пример

• двухсторонний (два SliderHandle)
• выделена разрешенная область ()
• выделена выбранная область (<Range range={[left, right]} />)
• по клику ближайший ползунок устанавливается в позицию клика (handleClick)

import React from 'react';
import {Axis, SliderHandle, Range} from 'fr-range-slider';
import {autobind} from 'core-decorators';

const fullRange = [0, 10];
const allowedRange = [1, 9];
const limit = (x) => {
    if (x < allowedRange[0]) return allowedRange[0];
    if (x > allowedRange[1]) return allowedRange[1];
    return x;
};

export default class TestApp extends React.Component {
    state = {
        left: 3,
        right: 5
    };

    @autobind
    handleLeftChange(left) {
        const {right} = this.state;
        this.setState({left: limit(Math.min(left, right))});
    }

    @autobind
    handleRightChange(right) {
        const {left} = this.state;
        this.setState({right: limit(Math.max(left, right))});
    }

    @autobind
    handleClick(e, val) {
        const {left, right} = this.state;
        const middle = (left + right) / 2;

        const limited = limit(val);
        if (limited < middle) {
            this.setState({left: limited});
        } else {
            this.setState({right: limited});
        }
    }

    render() {
        const {left, right} = this.state;

        return <Axis domain={fullRange}
                     onClick={this.handleClick}>
            <StaticRange left={allowedRange[0]}
                         width={allowedRange[1] - allowedRange[0]}
                         className='allowed' />
            <StaticRange left={left}
                         width={right - left}
                         className='selected' />
            <DraggableRange left={left}
                            onDrag={this.handleLeftChange} />
            <DraggableRange left={right}
                            onDrag={this.handleRightChange} />
        </Axis>;
    }
};

2d:

По аналогии с 1d есть три компонента: Area, StaticRect и DraggableRect

import {Area, StaticRect, DraggableRect} from 'fr-range-slider/2d';

Те же свойства, те же требования к css.

У Area в отличие от Axis нет свойства axis

onDrag, onDragStart, onDragEnd - получают в качестве значения не число, а массив [x, y]

reflow

Чтобы избежать reflow при каждом update можно указывать в Area или Axis width и/или height