import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export const SoftRangeHighlight = ({ hasFocus, showTicks, lowerValue, upperValue, max, min }) => {
    // Calculate the width the range based on value
    // const rangeWidth = (value - min) / (max - min);
    const leftPosition = (lowerValue - min) / (max - min);
    const rangeWidth = (upperValue - lowerValue) / (max - min);
    const rangeWidthStyle = {
        marginLeft: `${leftPosition * 100}%`,
        width: `${rangeWidth * 100}%`
    };
    const classes = classNames('softRangeHighlight', {
        'softRangeHighlight--hasTicks': showTicks
    });
    const progressClasses = classNames('softRangeHighlight__progress', {
        'softRangeHighlight__progress--hasFocus': hasFocus
    });
    return (React.createElement("div", { className: classes },
        React.createElement("div", { className: progressClasses, style: rangeWidthStyle })));
};
// @ts-ignore
SoftRangeHighlight.propTypes = {
    hasFocus: PropTypes.bool,
    showTicks: PropTypes.bool,
    lowerValue: PropTypes.number.isRequired,
    upperValue: PropTypes.number.isRequired,
    max: PropTypes.number.isRequired,
    min: PropTypes.number.isRequired
};
//# sourceMappingURL=SoftRangeHighlight.js.map