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

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

export const fillSlider = _ref => {
  let {
    fromSlider,
    toSlider,
    theme,
    fromValue,
    toValue
  } = _ref;
  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;
};
export const calculateGradientOffset = _ref2 => {
  let {
    value,
    min,
    max,
    thumbWidth,
    containerWidth
  } = _ref2;
  const percentage = (value - min) / (max - min);
  const adjustedWidth = containerWidth - thumbWidth / 2;
  return percentage * adjustedWidth + thumbWidth / 2 + 5;
};
export const calculatePopupPosition = _ref3 => {
  let {
    sliderValue,
    min,
    max,
    popupWidth
  } = _ref3;
  // 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);
};
export const getThumbMaxWidth = _ref4 => {
  let {
    maxNumber,
    thumbLabelFormatter
  } = _ref4;
  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;
};
//# sourceMappingURL=slider.js.map