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

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

代码语言：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) * (100.........完整代码请登录后点击上方下载按钮下载查看