css 是否有可能实现一个滑块或拨号元素与此概念？

rdlzhqv9 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(138)

我想实现一个HTML slider或HTML dial概念元素，看起来像下图。

是否可以在真实的中实现HTML5，CSS3，JavaScript？
我一直在浏览JSFiddle和Codepen，但我找不到任何真实的的概念关键字。

css

来源：https://stackoverflow.com/questions/68613014/is-it-possible-to-implement-a-slider-or-dial-element-with-this-concept

2条答案

按热度按时间

eoigrqb61#

您可以尝试将html输入类型设置为“range”，并根据您的需要设置相应的样式。
示例用法：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_rangeslider

赞(0）回复(0）举报 2023-06-07

uwopmtnx2#

我在找类似的东西。在没有现成的解决方案的情况下，我创建了以下内容。希望这能有所帮助，并开放任何反馈或如果你发现更好的东西。您可以在https://jsfiddle.net/kq8awn6o/上看到它的运行情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test Slider</title>
  <style>
    .striped-background {
      background: repeating-linear-gradient(
        90deg,
        white 10px,
        silver 20px,
        lightslategray 30px,
        grey 40px,
        black 50px,
        lightslategray 60px,
        silver 70px,
        white 80px
      );
      background-size: 20px 20px;
      height: 20px;
      width: 50%;
      position: relative;
      overflow: hidden;
      margin-left: 20px;
    }

    .slider {
      position: absolute;
      width: 100%;
      background: transparent;
      -webkit-appearance: none;
      appearance: none;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      background: transparent;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="striped-background">
    <input
      type="range"
      min="0"
      max="100"
      value="0"
      class="slider"
      id="mySlider"
    />
  </div>
  <div>
    <p id="value">0</p>
  </div>

  <script>
    const weight = 10;
    const minValue = 0;
    const maxValue = NaN;

    const slider = document.getElementById("mySlider");
    const stripedBackground = document.querySelector(".striped-background");
    let isDragging = false;
    let startValue = parseFloat(slider.value);
    let endValue = parseFloat(slider.value);
    let accumulatedValue = 0;
    let prevX = 0;
    let prevTime = 0;
    
    slider.addEventListener("mousedown", (event) => {
      isDragging = true;
      const sliderRect = slider.getBoundingClientRect();
      startValue = ((event.pageX - sliderRect.left) / slider.offsetWidth);
      prevX = event.pageX;
      prevTime = Date.now();
    });

    slider.addEventListener("mousemove", (event) => {
      if (isDragging) {
        const offset = (slider.value * 100) / slider.max;

        const sliderRect = slider.getBoundingClientRect();
        const mx = event.pageX - sliderRect.left;
        endValue = mx / slider.offsetWidth;

        if (endValue > 1) {
          endValue = 1;
        }
        if (endValue < 0) {
          endValue = 0;
        }

        const currentValue = endValue - startValue;
        const currentTime = Date.now();
        const deltaTime = currentTime - prevTime;
        const speed = weight* Math.abs((event.pageX - prevX) / deltaTime);
    
        accumulatedValue += currentValue * speed;
        if(!isNaN(minValue)){
            accumulatedValue = Math.max(accumulatedValue, minValue)
        }
        if(!isNaN(maxValue)){
            accumulatedValue = Math.min(accumulatedValue, maxValue)
        }
        if( !(accumulatedValue == minValue || accumulatedValue == maxValue) ){
            scrolltheSlider(offset);
        }

        document.getElementById("value").textContent = accumulatedValue.toFixed(2);

        startValue = endValue;
        prevX = event.pageX;
        prevTime = currentTime;
      }
    });

    scrolltheSlider = function(offset){
        stripedBackground.style.backgroundPosition = `${offset}% 0`;
    }

    slider.addEventListener("mouseup", () => {
      isDragging = false;
    });
  </script>
</body>
</html>

赞(0）回复(0）举报 2023-06-07

我来回答

css 是否有可能实现一个滑块或拨号元素与此概念？

2条答案

相关问题

热门标签

最新问答