antd-mobile/2x/es/components/slider/marks.js

<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*hjjDS5Yy-ooAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />

import React from 'react';
import classNames from 'classnames';
const classPrefix = `adm-slider-mark`;

const Marks = ({
  marks,
  upperBound,
  lowerBound,
  max,
  min
}) => {
  const marksKeys = Object.keys(marks);
  const range = max - min;
  const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).filter(point => point >= min && point <= max).map(point => {
    const markPoint = marks[point];

    if (!markPoint && markPoint !== 0) {
      return null;
    }

    const isActive = point <= upperBound && point >= lowerBound;
    const markClassName = classNames({
      [`${classPrefix}-text`]: true,
      [`${classPrefix}-text-active`]: isActive
    });
    const style = {
      left: `${(point - min) / range * 100}%`
    };
    return React.createElement("span", {
      className: markClassName,
      style: style,
      key: point
    }, markPoint);
  });
  return React.createElement("div", {
    className: classPrefix
  }, elements);
};

export default Marks;