@chayns-components/core/lib/cjs/utils/slider.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getThumbMaxWidth = exports.fillSlider = exports.calculatePopupPosition = exports.calculateGradientOffset = void 0;
const fillSlider = ({
  fromSlider,
  toSlider,
  theme,
  fromValue,
  toValue
}) => {
  const rangeDistance = Number(toSlider.max) - Number(toSlider.min);
  const fromPosition = Number(fromValue ?? fromSlider.value) - Number(toSlider.min);
  const toPosition = Number(toValue ?? toSlider.value) - Number(toSlider.min);
  const backgroundColor = theme['403'];
  const trackColor = theme['409'];
  if (!backgroundColor || !trackColor) {
    return;
  }
  const gradient = `linear-gradient(
      to right,
      ${backgroundColor} 0%,
      ${backgroundColor} ${fromPosition / rangeDistance * 100}%,
      ${trackColor} ${fromPosition / rangeDistance * 100}%,
      ${trackColor} ${toPosition / rangeDistance * 100}%,
      ${backgroundColor} ${toPosition / rangeDistance * 100}%,
      ${backgroundColor} 100%)`;

  // Apply the gradient to the appropriate slider
  // eslint-disable-next-line no-param-reassign
  toSlider.style.background = gradient;
  // eslint-disable-next-line no-param-reassign
  fromSlider.style.background = gradient;
};
exports.fillSlider = fillSlider;
const calculateGradientOffset = ({
  value,
  min,
  max,
  thumbWidth,
  containerWidth
}) => {
  const percentage = (value - min) / (max - min);
  const adjustedWidth = containerWidth - thumbWidth / 2;
  return percentage * adjustedWidth + thumbWidth / 2 + 5;
};
exports.calculateGradientOffset = calculateGradientOffset;
const calculatePopupPosition = ({
  sliderValue,
  min,
  max,
  popupWidth
}) => {
  // Berechnung des Prozentwerts des Sliders zwischen min und max
  const percentage = (sliderValue - min) / (max - min);

  // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)
  const leftAtMin = -10;
  const leftAtMax = -popupWidth + 25;

  // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert
  return leftAtMin + percentage * (leftAtMax - leftAtMin);
};
exports.calculatePopupPosition = calculatePopupPosition;
const getThumbMaxWidth = ({
  maxNumber,
  thumbLabelFormatter
}) => {
  const element = document.createElement('span');
  element.style.height = '20px';
  element.style.display = 'flex';
  element.style.padding = '16px';
  element.style.whiteSpace = 'nowrap';
  element.style.minWidth = '20px';
  element.style.opacity = '0';
  element.style.position = 'absolute';
  element.textContent = typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(maxNumber) : String(maxNumber);
  document.body.appendChild(element);
  const width = element.offsetWidth;
  document.body.removeChild(element);
  return width;
};
exports.getThumbMaxWidth = getThumbMaxWidth;
//# sourceMappingURL=slider.js.map