css+js实现步进式拖动取值器滑竿滑条range效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：css+js实现步进式拖动取值器滑竿滑条range效果代码，tweakpane可自定义长度及数量，还能让隐藏的range显示出来

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('//repo.bfw.wiki/bfwrepo/css/normalize.css') layer(normalize);

@layer normalize, base, demo, slider, animation;

@layer animation {
  @supports (animation-timeline: scroll()) {
    :root {
      --transition: 0.625s;
      --ease: linear(
        0 0%,
        0.5007 7.21%,
        0.7803 12.29%,
        0.8883 14.93%,
        0.9724 17.63%,
        1.0343 20.44%,
        1.0754 23.44%,
        1.0898 25.22%,
        1.0984 27.11%,
        1.1014 29.15%,
        1.0989 31.4%,
        1.0854 35.23%,
        1.0196 48.86%,
        1.0043 54.06%,
        0.9956 59.6%,
        0.9925 68.11%,
        1 100%
      );
    }
    @property --value {
      initial-value: 0;
      inherits: true;
      syntax: '<number>';
    }
    .snappy {
      timeline-scope: --thumb;
      -webkit-animation: progress both linear;
              animation: progress both linear;
      animation-direction: reverse;
      animation-timeline: --thumb;
      animation-range: contain;
    }
    @-webkit-keyframes progress {
      to {
        --value: 1;
      }
    }
    @keyframes progress {
      to {
        --value: 1;
      }
    }
    .snappy input {
      overflow: hidden;
    }
    .snappy ::-webkit-slider-thumb {
      view-timeline: --thumb inline;
    }

    .snappy__indicator,
    .snappy__fill::after,
    .track {
      transition: translate var(--transition) var(--ease);
    }

    .snappy__indicator {
      translate: calc(var(--value) * (100cqi - 100%)) -50%;
    }
    .snappy__fill::after {
      translate: calc(var(--value) * 100cqi) 0%;
    }
    .track {
      translate: 0 calc(var(--value) * (2.625rem * 10));
    }
  }
}

@layer slider {
  .snappy {
    --height: 2.625rem;
    display: flex;
    gap: 0.875rem;
    border-radius: 100px;
    background: black;
    color: white;
    padding: 0 1.125rem;
    width: calc(var(--width) * 1px);
    max-width: calc(100vw - 2rem);
    align-items: center;
  }

  .number__track {
    width: 2ch;
    position: relative;
    display: inline-block;
    height: var(--height);
    overflow: hidden;
    -webkit-mask: linear-gradient(#0000, #000 35% 65%, #0000);
            mask: linear-gradient(#0000, #000 35% 65%, #0000);
  }

  .track {
    position: absolute;
    display: flex;
    bottom: 0;
    flex-direction: column;
  }

  .track span {
    width: 100%;
    display: inline-block;
    height: var(--height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .snappy__track {
    --gradient: radial-gradient(
      0.5rem 0.5rem at calc(0.5rem) 50%,
      hsl(0 0% 25%) calc(0.5rem - 3px),
      transparent calc(0.5rem - 3px)
    );
    flex: 1;
    height: var(--height);
    position: relative;
    container-type: inline-size;
  }
  .snappy__track::before {
    background: var(--gradient) 0 50% / 1rem 100% no-repeat,
      var(--gradient) 10% 50% / 1rem 100% no-repeat,
      var(--gradient) 20% 50% / 1rem 100% no-repeat,
      var(--gradient) 30% 50% / 1rem 100% no-repeat,
      var(--gradient) 40% 50% / 1rem 100% no-repeat,
      var(--gradient) 50% 50% / 1rem 100% no-repeat,
      var(--gradient) 60% 50% / 1rem 100% no-repeat,
      var(--gradient) 70% 50% / 1rem 100% no-repeat,
      var(--gradient) 80% 50% / 1rem 100% no-repeat,
      var(--gradient) 90% 50% / 1rem 100% no-repeat,
      var(--gradient) 100% 50% / 1rem 100% no-repeat, hsl(0 0% 15%);
    border-radius: 100px;
    content: '';
    position: absolute;
    width: 100%;
    height: 0.875rem;
    top: 50%;
    left: 0;
    pointer-events: none;
    translate: 0 -50%;
  }
  .snappy__fill {
    height: 0.875rem;
    border-radius: 100px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    translate: 0 -50%;
    -webkit-clip-path: inset(0 0 0 0 round 100px);
            clip-path: inset(0 0 0 0 round 100px);
    pointer-events: none;
  }

  .snappy__fill::after {
    content: '';
    width: 120%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: white;
    transform: translateX(-100%);
  }

  .snappy__indicator {
    pointer-events: none;
    height: 0.875rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 50%;
    left: 0;
    translate: calc(((100cqi - 100%) / 10) * 10) -50%;
    outline: 2px solid hsl(0 0% 50%);
  }

  .snappy__label {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
  }

  .slash {
    font-family: sans-serif;
  }

  .number {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .snappy__track input {
    width: 100%;
  }

  .snappy [type='range'] {
    opacity: 0;
    height: var(--height);
    accent-color: red;
    transition: translate var(--transition) var(--ease),
      opacity var(--transition) var(--ease);
  }

  [data-reveal='true'] .snappy [type='range'] {
    opacity: 1;
    translate: 0 -150%;
  }
  [data-reveal='true'] .snappy [type='range']::-webkit-slider-thumb {
    opacity: 1;
    height: auto;
   .........完整代码请登录后点击上方下载按钮下载查看