@sms-frontend/components/es/Slider/ticks.js

SMS Design React UI Library.

import React, { memo } from 'react';
import { plus } from 'number-precision';
import { formatPercent, getOffset, valueInRange } from './utils';
import cs from '../_util/classNames';
export default memo(function Ticks(props) {
    var step = props.step, min = props.min, max = props.max, value = props.value, prefixCls = props.prefixCls, vertical = props.vertical, reverse = props.reverse;
    var steps = [];
    var stepsLength = Math.floor((max - min) / step);
    for (var i = 0; i <= stepsLength; i++) {
        var stepVal = plus(i * step, min);
        if (stepVal <= min || stepVal >= max)
            continue;
        steps.push({
            offset: formatPercent(getOffset(stepVal, [min, max])),
            isActive: valueInRange(stepVal, value),
        });
    }
    return (React.createElement("div", { className: prefixCls + "-ticks" }, steps.map(function (item, index) {
        var _a, _b, _c;
        return (React.createElement("div", { key: index, className: cs(prefixCls + "-tick", (_a = {}, _a[prefixCls + "-tick-active"] = item.isActive, _a)), style: vertical
                ? (_b = {}, _b[reverse ? 'top' : 'bottom'] = item.offset, _b) : (_c = {}, _c[reverse ? 'right' : 'left'] = item.offset, _c) }));
    })));
});