@hackplan/polaris/esnext/components/RangeSlider/RangeSlider.js

Shopify’s product component library

import * as tslib_1 from "tslib";
import React from 'react';
import { createUniqueIDFactory } from '@shopify/javascript-utilities/other';
import { withAppProvider } from '../AppProvider';
import { RangeSliderDefault } from './utilities';
import { SingleThumb, DualThumb } from './components';
import styles from './RangeSlider.scss';
const getUniqueID = createUniqueIDFactory('RangeSlider');
class RangeSlider extends React.Component {
    constructor() {
        super(...arguments);
        this.id = getUniqueID();
    }
    render() {
        const _a = this.props, { min = RangeSliderDefault.Min, max = RangeSliderDefault.Max, step = RangeSliderDefault.Step, value } = _a, rest = tslib_1.__rest(_a, ["min", "max", "step", "value"]);
        const sharedProps = Object.assign({ id: this.id, min,
            max,
            step }, rest);
        const sliderType = isDualThumb(value) ? (<DualThumb value={value} {...sharedProps}/>) : (<SingleThumb value={value} {...sharedProps}/>);
        return <div className={styles.RangeSliderContainer}>{sliderType}</div>;
    }
}
function isDualThumb(value) {
    return Array.isArray(value);
}
export default withAppProvider()(RangeSlider);