欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

有沒有可能用這個概念實現一個滑塊或者表盤元素？

CSS
洪振霞2年前8瀏覽0評論

我想實現一個HTML滑塊或HTML撥號概念元素，看起來像下面的圖像。

enter image description here

有沒有可能在真實的HTML5，CSS3，JavaScript中實現？

一直在翻JSFiddle和Codepen，找不到任何真正的概念關鍵詞。

您可以嘗試html輸入類型為& quot范圍& quot并根據您的需求進行相應的設計。

示例用法: https://www.w3schools.com/howto/tryit.asp?filename = try how _ CSS _ range slider

我在找類似的東西。在沒有現成的解決方案的情況下，我創建了下面的。希望這有所幫助，并歡迎任何反饋或您是否發現了更好的東西。你可以在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>