Spaces:
Running
Running
File size: 1,472 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './monitor.css';
const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSliderUpdate}) => (
<div className={styles.defaultMonitor}>
<div className={styles.row}>
<div className={styles.label}>
{label}
</div>
<div
className={styles.value}
style={{background: categoryColor}}
>
{Number(value)}
</div>
</div>
<div className={styles.row}>
<input
className={classNames(styles.slider, 'no-drag')} // Class used on parent Draggable to prevent drags
max={max}
min={min}
step={isDiscrete ? 1 : 0.01}
type="range"
value={Number(value)}
onChange={onSliderUpdate}
/>
</div>
</div>
);
SliderMonitor.propTypes = {
categoryColor: PropTypes.string.isRequired,
isDiscrete: PropTypes.bool,
label: PropTypes.string.isRequired,
max: PropTypes.number,
min: PropTypes.number,
onSliderUpdate: PropTypes.func.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])
};
SliderMonitor.defaultProps = {
isDiscrete: true,
min: 0,
max: 100
};
export default SliderMonitor;
|