css+js美化range实现数值范围滑块滑竿拖动取值器代码-html代码-BFW代码库

css+js美化range实现数值范围滑块滑竿拖动取值器代码

代码语言：html

代码描述：css+js美化range实现数值范围滑块滑竿拖动取值器代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        * {
      margin: 0;
      padding: 0;
      background: none;
      font: inherit;
    }
    
    html, body, div, datalist, option {
      display: grid;
    }
    
    html {
      --extra: 0;
      --not-extra: calc(1 - var(--extra));
      --large: 0;
      --not-large: calc(1 - var(--large));
      height: 100%;
      font: 1em/1.625 molengo, ubuntu, sans-serif;
    }
    @media (min-width: 29.75em) {
      html {
        --extra: 1 ;
      }
    }
    @media (min-width: 350px) {
      html {
        --large: 1 ;
      }
    }
    @media (max-width: 220px) {
      html {
        font-size: 0.625em;
      }
    }
    
    .js {
      --js: 1 ;
    }
    
    body {
      --mover-w: min(100vw + -1.25em + -3.5em, 25em);
      grid-gap: 3em;
      place-content: center;
      background: conic-gradient(at 0.0625em 0.4375em, #454545 25%, #3c3c3c 0%) 50vw/0.5em 0.5em, repeating-conic-gradient(#3c3c3c 0% 25%, #454545 0% 50%) 50vw/0.125em 0.125em;
      background-blend-mode: lighten;
    }
    
    div, option, ::after {
      place-items: center;
    }
    
    ::before, ::after, input, output {
      grid-area: 1/1;
    }
    
    .wrap {
      --hue: 300;
      --rng: calc(var(--max) - var(--min));
      --sel: 0;
      --progr-o: -2em;
      --progr-or:
      	calc((1 - max(var(--v0), var(--v1, var(--min)))/var(--rng))*var(--mover-w) + 0.375em);
      --thumb-w: var(--thumb-h);
      --thumb-h: 1.625em;
      --thumb-bg:
      	radial-gradient(circle farthest-side at 61% 87%,
      			hsl(calc(var(--hue) + 5), 81.5%, 87%) 61%,
      			hsl(calc(var(--hue) + 12.5), 15%, 47%) 92%) content-box,
      	conic-gradient(at 65%,
      			hsl(calc(var(--hue) - 15), 57.5%, 53%),
      			hsl(calc(var(--hu.........完整代码请登录后点击上方下载按钮下载查看