时间戳

首页 > 解决方案 > 输入类型范围样式和显示值问题

javascript - 输入类型范围样式和显示值问题

问题描述

目前我正在开发 React BMI 计算器应用程序，但输入类型范围元素有问题。我之前遇到过一些问题，但我在这里或谷歌上找到了帮助。一切正常，直到我更改了最小值和最大值以使应用程序更有意义。

如果min设置为 1 并且max设置为 100 一切正常。

在此处输入图像描述

如您所见，滑块拇指上方的气泡中显示数字，并且滑块轨道选定部分的白色背景效果也可以正常工作。我能够移动滑块拇指，白色背景正在工作，并且气泡始终位于滑块拇指上方。

当我尝试将这些最小值和最大值切换为更真实的东西时，就会出现问题。

例如 ：

在这种情况下，我的整个应用程序都崩溃了，这就是结果。我不明白为什么，白色背景效果停止正常工作，滑块拇指一直向左，如果我尝试移动它们，气泡将显示在滑块拇指上方。

在此处输入图像描述

拜托，有人可以帮我吗？我整天都在为此苦苦挣扎。所有方法（如何设置输入类型范围的样式/如何更改输入类型范围的颜色/如何在其上方制作气泡，甚至如何制作白色背景选择效果）我在这里或谷歌上找到了，所以可能有一些代码中的错误，因为我从未尝试过设置样式或使用这些输入。

感谢您的每一个帮助。这是codesandbox的链接：https ://codesandbox.io/s/suspicious-tereshkova-ujk45?file=/src/index.css

标签： javascripthtmlcssreactjs

解决方案

我试图通过修改您的代码来完成所需的操作。

这是代码，您需要修改 Range.js 文件如下，

import React, { useEffect } from "react";

function Range(props) {
  useEffect(() => {
    const range = document.getElementById("range");
    const rangeV = document.getElementById("rangeV");

    const range2 = document.getElementById("range2");
    const rangeV2 = document.getElementById("rangeV2");

    const setValue = () => {
      const newValue = Number(
        ((range.value - range.min) * 100) / (range.max - range.min)
      );
      const newPosition = 10 - newValue * 0.2;

      rangeV.innerHTML = `<span>${range.value}&nbsp;cm</span>`;
      rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;

      const newValue2 = Number(
        ((range2.value - range2.min) * 100) / (range2.max - range2.min)
      );
      const newPosition2 = 10 - newValue2 * 0.2;
      
      rangeV2.innerHTML = `<span>${range2.value}&nbsp;kg</span>`;
      rangeV2.style.left = `calc(${newValue2}% + (${newPosition2}px))`;
    };

    document.addEventListener("DOMContentLoaded", setValue);
    range.addEventListener("input", setValue);
    range2.addEventListener("input", setValue);
    // setting default value of both the inputs
    document.getElementById('range').value = 185;
    document.getElementById('range2').value = 150;
  }, []);

  //Selected value effect
  function selectedEffectHeight(e) {
    const val = (e.target.value - 150)*1.42;
    e.target.style.background =
      "linear-gradient(to right, #fff 0%, #fff " +
      val +
      "%, #f0959a " +
      val +
      "%, #f0959a 100%)";
  }

  function selectedEffectWeight(e) {
    const val = (e.target.value - 50)*0.5;
    e.target.style.background =
      "linear-gradient(to right, #fff 0%, #fff " +
      val +
      "%, #f0959a " +
      val +
      "%, #f0959a 100%)";

  }


  return (
    <div className="range">
      <p className="heading">HEIGHT</p>
      <div className="range-wrap">
        <div className="range-value" id="rangeV">
          <span>{props.Height}&nbsp;cm</span>
        </div>
        <input
          type="range"
          id="range"
          min="150"
          max="220"
          onInput={selectedEffectHeight}
          onChange={props.getHeight}
        ></input>
      </div>

      <p className="heading">WEIGHT</p>
      <div className="range-wrap">
        <div className="range-value" id="rangeV2">
          <span>{props.Weight}&nbsp;kg</span>
        </div>
        <input
          type="range"
          id="range2"
          min="50"
          max="250"
          onInput={selectedEffectWeight}
          onChange={props.getWeight}
        ></input>
      </div>
    </div>
  );
}


export default Range;

推荐阅读