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

代码语言：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(--hue) - 25), 39%, 35%) 50%,
      			hsl(calc(var(--hue) - 15), 35%, 27%) 0%,
      			hsl(calc(var(--hue) - 15), 53%, 47%)) padding-box,
      	linear-gradient(hsl(var(--hue), 51%, 63%),
      			hsl(calc(var(--hue) - 5), 47%, 61%),
      			hsl(var(--hue), 95%, 28.5%)) border-box;
      grid-gap: 5px;
      grid-template-rows: var(--thumb-h) max-content;
      width: calc(var(--mover-w) + 3.5em);
      color: hsla(var(--hue), 99%, 50%, 0.3);
      filter: Saturate(var(--hl, 0));
      transition: filter 0.35s;
    }
    .wrap::after, .wrap output {
      display: var(--js, none);
    }
    .wrap::before, .wrap::after {
      width: calc(var(--mover-w) + 1em);
      height: 1em;
      border-radius: 0.5em;
      box-shadow: 0 1px #686868, inset 0 2px #090909;
      background: #252525;
      content: "";
    }
    .wrap::after {
      width: calc(var(--mover-w) + 0.75em);
      height: 0.75em;
      box-shadow: inset 0 0 0 1px hsl(var(--hue), 75%, 25%), inset 0 -1px 3px 1px hsl(var(--hue), 90%, 55%), 0 0 10px currentcolor, 0 0 15px currentcolor;
      background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 0 2.8284271247px, transparent 0 5.6568542495px), linear-gradient(hsl(calc(var(--hue) - 7.5), 67%, 81%), hsl(calc(var(--hue) + 2.5), 92.5%, 65%));
      clip-path: inset(var(--progr-o) var(--progr-or) var(--progr-o) var(--progr-ol, var(--progr-o)));
    }
    .wrap--2x {
      --progr-ol:
      	calc(min(var(--v0), var(--v1))/var(--rng)*var(--mover-w) + 0.375em);
    }
    .wrap--2x input {
      pointer-events: none;
    }
    .wrap:nth-child(2) {
      --hue: 180 ;
    }
    .wrap:nth-child(3) {
      --hue: 60;
      --thumb-p: .375em .625em;
      --thumb-w: 3.5em;
      --thumb-h: 1.5em;
      --thumb-r: .375em;
      --thumb-bg:
      	repeating-linear-gradient(90deg,
      			hsl(calc(var(--hue) - 20), 85%, 32.5%) 0 1px,
      			hsl(calc(var(--hue) - 17.5), 62%, 25%) 0 2px,
      			hsl(calc(var(--hue) - 22.5), 68%, 68%) 0 3px,
      			transparent 0 5px)
      		0/ 13px 100% space content-box,
      	linear-gradient(
      			hsl(calc(var(--hue) - 15), 85%, 51%),
      			hsl(calc(var(--hue) - 32.5), 85%, 37%)) padding-box,
      	linear-gradient(
      			hsl(calc(var(--hue) - 15), 87%, 81%),
      			hsl(calc(var(--hue) - 30), 50%, 50%)) border-box ;
    }
    .wrap:focus-within, .wrap:hover {
      --hl: 1 ;
    }
    
    .sr-only {
      position: fixed;
      bottom: 100%;
      right: 100%;
      -webkit-clip-path: circle(0);
      clip-path: circle(0);
      user-select: none;
    }
    
    input[type=range] {
      width: calc(var(--mover-w) + var(--thumb-w));
      cursor: pointer;
    }
    input[type=range], input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }
    input[type=range], input[type=range] + output {
      z-index: calc(var(--sel) + 1);
    }
    input[type=range]:focus {
      outline: none;
    }
    input[type=range]:is(:focus, :hover), input[type=range]:is(:focus, :hover) + output {
      --sel: 1 ;
    }
    input[type=range]::-webkit-slider-thumb {
      box-sizing: border-box;
      border: solid 1px transparent;
      padding: var(--thumb-p, 0.375em);
      width: var(--thumb-w);
      height: var(--thumb-h);
      border-radius: var(--thumb-r, 50%);
      box-shadow: 0 2px 2px rgba(20, 20, 20, 0.65);
      background: var(--thumb-bg);
      cursor: ew-resize;
      pointer-events: auto;
    }
    input[type=range]::-moz-range-thumb {
      box-sizing: border-box;
      border: solid 1px transparent;
      padding: var(--thumb-p, 0.375em);
      width: var(--thumb-w);
      height: var(--thumb-h);
      border-radius: var(--thumb-.........完整代码请登录后点击上方下载按钮下载查看