css美化input range滑块取值器效果代码-html代码-BFW代码库

css美化input range滑块取值器效果代码

代码语言：html

代码描述：css美化input range滑块取值器效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        html, body {
          display: grid;
        }
        
        html {
          height: 100%;
        }
        
        .js {
          --js: 1 ;
        }
        
        body {
          place-content: center;
          background: #3d3d3d;
          color: lightgreen;
          font: clamp(.625em, 5vw, 2em)/2 ubuntu, trebuchet ms, sans-serif;
        }
        
        input[type=range] {
          --min: 0;
          --dif: calc(var(--val) - var(--min));
          --rng: calc(var(--max, 100) - var(--min));
          --mov: calc(var(--dif)/var(--rng)*(100% - 12.8vmin));
          border: solid 1.28vmin #000;
          /* slider border */
          width: 80vmin;
          height: 12.8vmin;
          border-radius: 7.68vmin;
          background: linear-gradient(90deg, currentcolor calc(var(--js)*(6.4vmin + var(--mov))), transparent 0);
          background-color: #6d6d6d;
          /* slider background */
          color: #3399ff;
          /* slider fill/ highlight */
          transition: box-shadow 0.35s;
          cursor: pointer;
          /* add glow on hover/ focus */
        }
        input[type=range], input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
        }
        input[type=range]:.........完整代码请登录后点击上方下载按钮下载查看