slider-np/dist/index.es.js

this is a range slider for positive and negative value

import React, { useState, useEffect } from 'react';

const SliderNP = ({
  value,
  scaleColor,
  leftScaleColor,
  rightScaleColor,
  pointerSize,
  pointerColor,
  pointerColorRange,
  sliderWidth,
  gapBetween,
  valueColorAuto
}) => {
  const [hoverValue, setHoverValue] = useState(null); // State variable for hover value
  const [sValue, setSValue] = useState(null); // State variable for sValue
  const [textColor, setTextColor] = useState(null); // State variable for sValue

  useEffect(() => {
    const checkSValue = () => {
      if (value === undefined || value < -10 || value > 10) {
        console.log("SliderPN: Slider_value should be between -10 and 10", value);
        return 50;
      }
      return 50 + value / 2 * 10;
    };
    const calculatedSValue = checkSValue();
    setSValue(calculatedSValue); // Store the sValue in state
  }, [value]);
  useEffect(() => {
    if (pointerColorRange) {
      if (sValue === 50) {
        pointerColor = "#000"; // Set black color when sValue is 50
      } else {
        pointerColor = sValue > 50 ? `rgb(0, ${148 + (sValue - 50) * 2}, 0)` : `rgb(${155 - (sValue - 50) * 2}, 0, 0)`;
      }
    }
    let fontColorHover = "";
    if (valueColorAuto) {
      if (sValue === 50) {
        fontColorHover = "#000"; // Set black color when sValue is 50
      } else {
        fontColorHover = sValue > 50 ? `rgb(0, ${148 + (sValue - 50) * 2}, 0)` : `rgb(${155 - (sValue - 50) * 2}, 0, 0)`;
      }
    }
    setTextColor(fontColorHover);
    const sliderPointer = document.getElementById("sliderPointer");
    const scale = document.getElementById("scale");
    if (sliderPointer) {
      sliderPointer.style.left = `${sValue}%`;
      sliderPointer.style.color = pointerColor;
      sliderPointer.style.fontSize = pointerSize;
    }
    if (scale) {
      scale.style.gap = gapBetween;
    }
  }, [sValue, pointerColorRange, pointerSize, scaleColor, leftScaleColor, rightScaleColor, gapBetween, pointerColor]);
  const sliderPointerStyle = {
    left: `${sValue}%`
  };
  const sliderPnCntStyle = {
    width: sliderWidth
  };
  const leftScaleStyle = {
    backgroundColor: scaleColor ? scaleColor : leftScaleColor
  };
  const rightScaleStyle = {
    backgroundColor: scaleColor ? scaleColor : rightScaleColor
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "slider_pn"
  }, /*#__PURE__*/React.createElement("div", {
    className: "slider_pn_cnt",
    style: sliderPnCntStyle
  }, /*#__PURE__*/React.createElement("div", {
    className: "slider_pn_scale"
  }, /*#__PURE__*/React.createElement("div", {
    id: "scale",
    className: "scale"
  }, /*#__PURE__*/React.createElement("span", {
    className: "left_scale",
    id: "leftScale",
    style: leftScaleStyle
  }), /*#__PURE__*/React.createElement("span", {
    className: "right_scale",
    id: "rightScale",
    style: rightScaleStyle
  }))), /*#__PURE__*/React.createElement("div", {
    className: "slider_pn_pointer"
  }, /*#__PURE__*/React.createElement("span", {
    id: "sliderPointer",
    style: sliderPointerStyle,
    "data-type": "\u25B2 ",
    onMouseEnter: () => setHoverValue(sValue),
    onMouseLeave: () => setHoverValue(null)
  }), hoverValue !== null && /*#__PURE__*/React.createElement("article", {
    className: "hover_value",
    style: {
      left: `${sValue}%`,
      color: textColor
    }
  }, sValue))));
};

export { SliderNP };