css+js实现带刻度显示的range数值显示器选择器代码-html代码-BFW代码库

css+js实现带刻度显示的range数值显示器选择器代码

代码语言：html

所属分类：选择器

代码描述：css+js实现带刻度显示的range数值显示器选择器代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import "//repo.bfw.wiki/bfwrepo/css/open-props.css" layer(support.design-system);
@import "//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css" layer(support.demo);
@import "//repo.bfw.wiki/bfwrepo/css/open-props.buttons.css" layer(support.demo);

@keyframes promote {
  0%, 100% {
    opacity: .5;
    transform: scale(.25);
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

scrolly-ruler {
  container: --scrolly-ruler / inline-size;
  width: clamp(90vw, 50vw, 12in);
  height: 1in;

  background: var(--surface-2);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);

  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  overflow: clip;
  counter-set: --inches;

  @media (prefers-color-scheme: light) {
    background: white;
  }

  & > ruler-indicator {
    content: "";
    place-self: center;
    height: .2in;
    width: .2in;
    border-radius: var(--radius-1);
    background: var(--surface-4);
    place-self: start center;
    transform-origin: center;
    transform: translateX(-50%) rotateZ(.125turn) translateY(-75%);
    transition: background-color .3s ease;

    &.has-target {
      background: var(--link);
    }
  }

  > ruler-grid {
    display: grid;
    grid-auto-flow: column;
    place-items: end;
    gap: calc(1in / 5);

    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    &:focus {
      outline: none;
    }

    &::before, &::after {
      content: "";
      display: inline-block;
      width: 80cqi;
    }

    & > * {
      background: var(--gray-4);
      inline-size: 1px;
      scroll-snap-align: center;
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
    }

    & > div {
      background: var(--gray-5);
      inline-size: 2px;
      block-size: .25in;

      view-timeline-name: --inch-timeline;
      view-timeline-axis: x;
      
      &:not(:first-of-type) {
        counter-increment: --inches;
      }

      &::before {
        display: inline-block;
        content: counter(--inches);
        position: relative;
        top: 0;
        left: 0;
        translate: -50% -1lh;
        transform-origin: bottom center;

        color: var(--text-2);
        font-size: var(--font-size-5);
        font-weight: 200;
        text-align: center;

        animation: promote var(--ease-in-out-1) both;
        animation-timeline: --inch-timeline;
        animation-range: cover, cover 30% cover 70%;
      }
    }

    & > span {
      block-size: .1in;
      transition: 
        background-color .3s ease,
        block-size .3s ease;

      &:nth-of-type(3n - 1) {
        block-size: .15in;
      }

      &.has-target {
        block-size: .5in;
        background: var(--link);
      }
    }
  }
}

@layer support.demo {
  body {
    display: grid;
    place-content: center;
    place-items: center;
    padding: var(--size-5);
    gap: var(--size-5);
  } 
}
</style>

 
  
  
</head>

<body translate="no">
  <scrolly-ruler>
  <ruler-indicator></ruler-indicator>
  <ruler-grid>
    <div data-ruler-value="0"></div>
    <span data-ruler-value="0.25"></span>
    <span data-ruler-value="0.5"></span>
    <span data-ruler-value="0.75"></span>

    <div data-ruler-value="1"></div>
    <span data-ruler-value="1.25"></span>
    <span data-ruler-valu.........完整代码请登录后点击上方下载按钮下载查看