@itwin/itwinui-react/esm/core/Slider/Track.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { Box } from '../../utils/index.js';
function shouldDisplaySegment(segmentIndex, mode) {
  if ('odd-segments' === mode && 0 === (segmentIndex + 1) % 2) return true;
  if ('even-segments' === mode && 0 === segmentIndex % 2) return true;
  return false;
}
function generateSegments(values, min, max) {
  let segments = [];
  let newValues = [...values];
  newValues.sort((a, b) => a - b);
  if (
    0 === newValues.length ||
    newValues[0] < min ||
    newValues[newValues.length - 1] > max ||
    min === max
  )
    return [];
  let lastValue = min;
  for (let i = 0; i < newValues.length; i++) {
    segments.push({
      left: lastValue,
      right: newValues[i],
    });
    lastValue = newValues[i];
  }
  segments.push({
    left: lastValue,
    right: max,
  });
  return segments;
}
export const Track = (props) => {
  let {
    className,
    trackDisplayMode,
    sliderMin,
    sliderMax,
    values,
    orientation,
  } = props;
  let [segments, setSegments] = React.useState(() =>
    generateSegments(values, sliderMin, sliderMax),
  );
  React.useEffect(() => {
    setSegments(generateSegments(values, sliderMin, sliderMax));
  }, [values, sliderMin, sliderMax]);
  return React.createElement(
    React.Fragment,
    null,
    'none' !== trackDisplayMode &&
      segments.map((segment, index) => {
        let lowPercent =
          segment.left >= sliderMin && sliderMax !== sliderMin
            ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
            : 0;
        let highPercent =
          segment.right >= sliderMin && sliderMax !== sliderMin
            ? 100.0 -
              (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
            : 100;
        return React.createElement(
          React.Fragment,
          {
            key: index,
          },
          shouldDisplaySegment(index, trackDisplayMode)
            ? React.createElement(Box, {
                className: cx('iui-slider-track', className),
                style: {
                  ...('horizontal' === orientation
                    ? {
                        insetInlineStart: `${lowPercent}%`,
                        insetInlineEnd: `${highPercent}%`,
                      }
                    : {
                        insetBlockStart: `${highPercent}%`,
                        insetBlockEnd: `${lowPercent}%`,
                      }),
                },
              })
            : null,
        );
      }),
  );
};